zoukankan      html  css  js  c++  java
  • $.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);
    

      

  • 相关阅读:
    MongoDB常用命令
    centos6.9下MongoDB安装
    第三十二节 selenium爬取拉勾网
    第三十节 selenium设置代理
    第三十节 selenium打开多个窗口和切换
    第二十九节 selenium隐式和显式等待
    第二十八节 selenium操作cookie信息
    第二十七节 selenium行为链
    第二十六节 selenium操作表单元素
    SpringMVC工作原理详解
  • 原文地址:https://www.cnblogs.com/yolo-bean/p/7725852.html
Copyright © 2011-2022 走看看