• $.ajax()实现简单计算器


    1、html页面  a.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>calculate</title>
    </head>
    <body>
                  <input type = "text" name="num1" id="num1">
                  <select name = "select" id="select">
                         <option value="+" >+</option>
                         <option value="-" >-</option>
                         <option value="*" >*</option>
                         <option value="/" >/</option>
                  </select>
                  <input type = "text" name="num2" id="num2" >
                  <input type = "submit" name = "submit" id="submit" value="=">
                  <input type = "text" name="result" id='result' placeholder="结果显示">
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
    	$('#submit').click(function(){
    		var data={'num1':$('#num1').val(),'num2':$('#num2').val(),'select':$("#select").val()};
    		$.ajax({
    			type:'get',
    			url:'a.php',
    			data:data,
    			dataType:'json',
    			success:function(data){
    			$('#result').val(data);
    			},
    			error:function(error){
    				alert('no');
    			}
    		});
    	});
    </script>
    
    </body>
    </html>
    

     2、php页面  a.php

    <?php
    $data=$_GET;
    $num1=$data['num1'];
    $num2=$data['num2'];
    $select=$data['select'];
    if(is_numeric($num1) && is_numeric($num2)){
    	switch($select){
    		case '+':
    			$result=$num1+$num2;break;
    		case '-':
    			$result=$num1-$num2;break;
    		case '*':
    			$result=$num1*$num2;break;
    		case '/':
    			$result=$num1/$num2;break;
    	}
    }
    
    echo json_encode($result);
    

      

  • 相关阅读:
    gitlab 启用HTTPS
    centos7 部署 汉化版 gitlab 10.0.2
    前端常见跨域解决方案(全)
    [转]用python爬虫抓站的一些技巧总结 zz
    【转】通用权限管理设计 之 数据权限
    【转】通用权限管理设计 之 功能权限设计
    JavaScript数据结构和算法
    Vue.js 插件开发详解
    wdcpV3面板安装ssl证书 apache教程 子站SSL配置
    [POJ-2823] -Sliding Window
  • 原文地址:https://www.cnblogs.com/yolo-bean/p/7725852.html
Copyright © 2020-2023  润新知