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

  

转载于:https://www.cnblogs.com/yolo-bean/p/7725852.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值