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

      

  • 相关阅读:
    鼠标移上,内容显示
    Jquery横向菜单和纵向菜单的收起与展开
    适配不同大小浏览器——固定排班
    jQuery UI Widgets-menu
    Web前端的35个jQuery小技巧-转载
    android中listview中包含ratingbar响应不了点击事件
    点击空白区域,键盘向下收缩
    时间轮 Dialog 最简单的时间轮
    android 获取电话本中的联系人列表
    《网红经济》读后感
  • 原文地址:https://www.cnblogs.com/yolo-bean/p/7725852.html
Copyright © 2011-2022 走看看