首页 > Web开发 > 详细

$.ajax()实现简单计算器

时间:2017-10-24 21:57:21      阅读:337      评论:0      收藏:0      [点我收藏+]

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

  

$.ajax()实现简单计算器

原文:http://www.cnblogs.com/yolo-bean/p/7725852.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!