$.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);
随机推荐
- dulicate symbol for architecture i386 或者其他什么CPU架构 比如i386
昨天群里有个哥们遇到和么一个问题 , 错误的大概意思呢,就是 重复定义了 一个名字. 解决办法,只能修改名字啊. 而且,错误信息 也很明确的 支出了 重复定义的类文件名字PassGuardViewC ...
- #pta循环作业
7-7 计算阶乘和 1.题目 . 2.设计思路 此题目比一道类似的经典题目的区别就是不是直接的数字累加而是每次的数字先累乘之后再累加 只需要在累加之前处理一下所要加的数字就可以实现了 3.流程 ...
- .net整理
CLR via C# 1 关于CLI,CTS,CLS,CIL,.Net Framework,CLR,FCL图 CLI:Common Language Infrastructure,是公共语言架构: C ...
- UML建模之时序图(Sequence Diagram)
一.时序图简介(Brief introduction) 二.时序图元素(Sequence Diagram Elements) 角色(Actor) 对象(Object) 生命线(Lifeline) 控制 ...
- html笔记4
<html> <body> <p>这是列表标签</p> <ul> <li>xxx</li> </ul> ...
- 4395: [Usaco2015 dec]Switching on the Lights
每次到达一个点,或者点亮一个房间的灯的时候,检查一下它四周的点能否走. 一开始看错题了..要求的是最多能开多少房的灯. #include<cstdio> #include<iostr ...
- js函数声明的三种方式
1.直接声明 function box(num1,num2){ return num1+num2;}alert(box(1,2)); 2.使用变量初始化 var box2 = function(num ...
- [国嵌攻略][104][Linux内核模块设计]
内核模块示例 #inlcude <linux/init.h> #inlcude <linux/module.h> static int hello_init(){ printk ...
- html日历(2)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- React Native学习(七)—— FlatList实现横向滑动列表效果
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...