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);
    

      

  • 相关阅读:
    超时时间已到。在操作完成之前超时时间已过或服务器未响应 shiney
    C#的映射机制 shiney
    C#用OLEDB导入问题总结 shiney
    SQL中的isnull shiney
    单虚拟机搭建zookeeper集群
    shell与sqlplus交互
    servlet
    迷你MVVM框架 avalonjs 入门教程
    classpath 'com.android.tools.build:gradle:6.7
    new ArrayList json.parse
  • 原文地址:https://www.cnblogs.com/yolo-bean/p/7725852.html
Copyright © 2011-2022 走看看