• $.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);
    

      

  • 相关阅读:
    vue中的样式
    v-model 双向数据绑定
    v-on 事件修饰符
    Linq Join
    Elasticsearch.Net 异常:[match] query doesn't support multiple fields, found [field] and [query]
    MongoDB开启权限认证
    elasticsearch备份与恢复
    elasticserach + kibana环境搭建
    Kibana TypeError : Object #<GlobalState> has no method 'setDefaults'
    匿名函数
  • 原文地址:https://www.cnblogs.com/yolo-bean/p/7725852.html
Copyright © 2020-2023  润新知