使用ajax实现一个计算器（完整代码)

最新推荐文章于 2021-08-05 15:49:39 发布

小漫cool

最新推荐文章于 2021-08-05 15:49:39 发布

阅读量780

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web 文章标签： java ajax web

本文链接：https://blog.csdn.net/weixin_44436675/article/details/118325607

web 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的Ajax计算器项目，包括前端页面设计与后端处理逻辑。前端通过jQuery发起异步请求，后端使用Servlet接收并处理数据，最后将结果以JSON格式返回。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：1.使用Ajax提交时用的是button，不是form表单提交的submit
2.在后端类设置编码和属性时，属性应设置为response.setContentType("application/json");
3.传递给后端类参数是jquery.getJSON键值对中的key值。
前端代码：

<!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() {
            //todo:非空效验
            jQuery.getJSON("mycalc",{
                "number1":jQuery("#num1").val(),//使用jQuery拿到前端的数，向后端发送请求；
                "number2":jQuery("#num2").val()
            },function (data) {//接受后端的响应信息；
                if(data !=null && data.state==200){

                    alert(data.sum);//输出后端数据；
                }else {
                    alert(data.msg);
                }
            });
        }
    </script>
</head>
<!--
<div style="text-align: center;margin-top: 150px;">
    <h1>胡玉的计算器-Ajax版本</h1>
    数字1:&nbsp;&nbsp;<input id="num1" name="num1" type="number"><p></p>
    数字2:&nbsp;&nbsp;<input id="num2" name="num2" type="number"><p></p>
    <input type="button" value="提 交" onclick="mysub()">

</div>
-->
<body>
<div style="text-align: center;margin-top: 150px;">
    <h1>计算器——Ajax版本</h1>
      数字1&nbsp; :&nbsp;&nbsp;<input id="num1" name="num1" type="number"><p></p>
      数字2&nbsp; :&nbsp;&nbsp;<input id="num2" name="num2" type="number"><p></p>
      <input type="button" value="提  交" onclick="mysub()">
</div>
</body>
</html>

后端代码：

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;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: HuYu
 * Date: 2021-06-28
 * Time: 18:10
 */
public class MyCalcServlet 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 {
        //1.先从前端获取参数
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json");
        int state = -1;//state = 200说明请求正常
        String msg = " ";//错误描述信息
        int sum = 0;
        String num1 = request.getParameter("number1");
        String num2 = request.getParameter("number2");
        //todo:非空校验
        //2.进行相应的业务操作
        if (num1 != null && num2 != null && !num1.equals(" ") && !num2.equals(" ")) {
            //进行业务处理
            sum = Integer.parseInt(num1) + Integer.parseInt(num2);
            state = 200;
        } else {
            //非法请求，参数传递不全
            msg = "非法请求，参数不全";
        }

        //3.返回结果给前端
        //{"state":%d,"msg":"%s","sum":%d}
        PrintWriter writer = response.getWriter();
        writer.println(String.format("{\"state\":%d,\"msg\":\"%s\",\"sum\":%d}", state, msg, sum));
    }
}