用Ajax&JSON实现简单计算器_通过java、json、ajax、servlet实现4*4按钮点击事件计算器-CSDN博客

本文链接：https://blog.csdn.net/qq_45852612/article/details/115612212

Ajax实现简单计算器

1. Ajax是什么

Ajax 是一种在不用重新加载整个网页的情况下，能够更新部分网页，
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
这意味着不用重新加载整个页面的情况下，对网页进行部分更新。

2. JSON是什么

JSON是一种轻量级的数据交互格式，采用完全独立于编程语言的文本格式来存储和表示数据。

特点

现在多用于存储和交换文本信息的语法
进行数据的传输
JSON 比 XML 更小、更快，更易解析。

语法使用基本规则

jQuery.getJSON("后端接口地址url",
            {"username":"root","password":"pwd"},
  （回调函数）function (data){具体业务逻辑实现})

注意
中间的{“username”:“root”,“password”:“pwd”}使用{}包裹，{}表示是一个对象，里面会有多个属性，多个属性是以key，value键值对的形式出现的，多个键值对使用“，”分隔，每个键值对使用“：”分隔。

下面是具体代码实现
前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器--Ajax</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        function mysub(type) {
            var inputnum1 = jQuery("#num1");
            var inputnum2 = jQuery("#num2");
            if(inputnum1.val()==""){
                alert("第一个数字没输入呢!");
                //光标聚焦
                inputnum1.focus();
                return false;
            }
            if(inputnum2.val()==""){
                alert("第二个数字没输入呢!");
                inputnum2.focus();
                return false;
            }
            if(type==2){
                if(confirm("确认清空?")){
                    inputnum1.val("");
                    inputnum2.val("");
                }
                return false;
            }
            if(type==1){
                jQuery.getJSON("mycalc",{
                    "number1":jQuery("#num1").val(),
                    "number2":jQuery("#num2").val()
                },
                    function (data) {
                        if(data!=null && data.succ==1){
                            alert(data.sum);
                        }else{
                            alert(data.msg);
                        }
                    }
                )
            }
        }
    </script>
</head>
<body>
<div style="margin-top:20px;text-align: center">
    <h1>我的计算器--Ajax版本</h1>
    数字1:<input id="num1" name="num1" type="number"><p></p>
    数字2:<input id="num2" name="num2" type="number"><p></p>
    <input type="button" value="提 交" onclick="mysub(1)">
    <input type="button" value="清 空" onclick="mysub(2)">
</div>
</body>
</html>

具体页面样式如下：
在这里插入图片描述

在实现后端代码之前，不要忘记配置路由

<!--  calc Ajax-->
  <!--用来注册servlet接口的实现类-->
  <servlet>
    <servlet-name>kun</servlet-name>
    <servlet-class>CalcAjaxServlet</servlet-class>
  </servlet>
  <!--  用来注册sverlet的接口-->
  <servlet-mapping>
    <servlet-name>kun</servlet-name>
    //这里一定要和JSON中的url一致
    <url-pattern>/mycalc</url-pattern>
  </servlet-mapping>

后端代码实现
很简单的五步蛇操作

重写doGet和doPost方法
设置编码格式及返回类型
从前端获取参数
相应业务逻辑处理
返回上一层结果给前端

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class CalcAjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        int succ=-1;//1表示成功
        String msg="";
        int sum=0;
        String num1=request.getParameter("number1");
        String num2=request.getParameter("number2");
        if(num1!=null && num2!=null &&!num1.equals("") && !num2.equals("")){
            sum=Integer.parseInt(num1)+Integer.parseInt(num2);
            succ=1;
        }else {
            msg="输入有误!";
        }
        PrintWriter printWriter=response.getWriter();
        //{"succ":%d,"msg":"%s","sum":%d}
        //这里提前将json数据格式写出来，会有转义字符
        printWriter.println(String.format("{\"succ\":%d,\"msg\":\"%s\",\"sum\":%d}",succ,msg,sum));

    }
}