使用Spring Boot+SpringMVC+(Thymeleaf可选)完成服务器版算术四则运算器,要求:
只有一个页面,有一个表单,有两个文本表单域用于输入两个操作数,一个下拉列表或单选按钮选择加减乘除运算,有一个确定或“=”按钮,点击后从服务器得到运算结果进行显示。页面样式自行设计。结果获得,同步或异步都可以。
对输入进行服务器端校验,操作数输入不能为空,必须是数字(整数或浮点数)。校验不通过返回输入页面显示错误信息。
在自定义的Controller中获取请求,进行四则运算,返回操作结果。
jsp内容有了:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<html>
<head>
<title>Title</title>
<script language="JavaScript">
$(function () {
$("#btn").click(function(){
let num1=$("#numOne").val();
let num2=$("#numTwo").val();
let yun=$("#yunsuan").val();
let param='{"numOne":'+'"'+num1+'"'+',"numTwo":'+'"'+num2+'"'+',"yunSuan":'+'"'+yun+'"'+'}';
// let array=new String();
$.ajax(
{
url:"${pageContext.request.contextPath}/calculatorController/calculate",
contentType:"application/json;charset=utf-8",
data:param,
dataType:"Json",
type:"POST",
success:function (data) {
var dataObj = data.result;
$("#result").html("结果="+dataObj);
$("#test2").innerHTML="success";
}
}
)
})
})
function checkNum1(num) {
let num1 = num.value;
if (num1 == '') {
alert("不能输入为空");
return false;
}
if (Math.round(num1) != num1) {
alert("这个数不是一个数字");
num.value = '';
num.onfocus;
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form1" action="" method="post">
请输入第一个数:<input type="text" name="numOne" id="numOne" onblur="checkNum1(this)">
<select name="yunSuan" id="yunsuan">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
请输入第二个数:<input type="text" name="numTwo" id="numTwo" onblur="checkNum1(this)">
<input type="button" value="计算" id="btn">
<label id="result"></label>
<label id="test2"></label>
</form>
</body>
</html>