码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-10-24 23:01:02      阅读:444      评论:0      收藏:0      [点我收藏+]

标签:echo   cal   name   encode   javascrip   eric   min   htm   body   

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()实现简单计算器

标签:echo   cal   name   encode   javascrip   eric   min   htm   body   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!