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