简单JQuery+AJAX+Servlet的计算器实现

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/way.js"></script>
<style type="text/css"></style>
<link type="text/css" rel="styleSheet" href="css/index.css" />
</head>
<body>
<div class="box">
<form action="" method="post" id="form1">
<table>
<tr>
<td width="30px"><input type="text" name="num1" id="cal1" /></td>

<td>
<select id="way" name="way">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
</td>

<td><input type="text" name="num2" id="cal2"/></td>
<td><input type="text" id="eql" value="="/></td>
<td><input type="text" id="result"/></td>
<td><input type="button" value="onclick" id="login"/></td>
</tr>
<tr>
<td colspan="6"><span id="check"></span></td>
</tr>
</table>
</form>
</div>
</body>
</html>

way.js

$(function(){
var num1 = $("#cal1");
var way = $("#way");
var num2 = $("#cal2");
var eql = $("#eql");
var result = $("#result");

num1.css({
background:"#ccc",
"50px",
height:"20px"
});
num2.css({
background:"#ccc",
"50px",
height:"20px"
});
way.css({
background:"#ccc",
"40px",
height:"20px"
});
eql.css({
background:"#ccc",
"40px",
height:"20px"
});
result.css({
background:"#ccc",
"50px",
height:"20px"
});
//获取按钮给按钮一个点击事件
$("#login").on('click',function (event) {

var result = $("#result");
var itemForm = $('#form1');
//在Jquery中AJAX的写法
$.ajax({
type:"post",
url:"/Calculate01/MyServlet",
data: itemForm.serialize(),
//接收后台传过来的值是text类型
dataType:'text',
success: function(data) {//date保存的是后台传入的数据

//data是从控制层返回来的值
if(data!="false"){
var textId=$("#result");//根据文本框的id找到这个文本框，并将其变成jquery对象
textId.val(data);//重点是这句话，赋值
}else{
alert("输入格式不正确");
}
// alert(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert( XMLHttpRequest.status );
}
});
})
});
Servlet

package cn.edu.com.Service;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.regex.Pattern;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MyServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;character=utf-8");
PrintWriter out = response.getWriter();
String num1 = request.getParameter("num1");
String num2= request.getParameter("num2");
String way = request.getParameter("way");
utilTool tool = new utilTool();
String result = tool.getTool(num1, num2, way);

if(result=="false") {
out.print("false");
}else {
out.println(result);
}
}
}

utils类

package cn.edu.com.Service;

import java.util.regex.Pattern;

public class utilTool {
private double n;
private String result;
private double n1;
private double n2;

public String getTool(String num1,String num2,String way) {

Pattern pattern = Pattern.compile("^(-?\d+)(\.\d+)?$");//返回一个Pattern的对象。
Pattern pattern1 = Pattern.compile("^(-?\d+)(\.\d+)?$");//返回一个Pattern的对象。
//与正则表达式进行匹配，匹配成功返回true匹配失败返回false

boolean check_num1 = pattern.matcher(num1).matches();
boolean check_num2 = pattern1.matcher(num2).matches();
if(num1!=null && num2!=null&&check_num1==true&&check_num2==true) {
if(way.equals("+")||way.equals("-")||way.equals("*")||way.equals("/")) {
n1 = Double.parseDouble(num1);
n2 = Double.parseDouble(num2);
switch (way) {
case "+":
n = n1+n2;
result = String.valueOf(n);
break;
case "-":
n = n1-n2;
result = String.valueOf(n);
break;
case "*":
n = n1*n2;
result = String.valueOf(n);
break;
case "/":
n = n1/n2;
result = String.valueOf(n);
break;

default:
break;
}

return result;
}else {
return "false";
}
}
else {
return "false";
}

}
}