实现ajax版本简单加法计算器（为了掌握ajax的相关操作及servlet项目环境的配置）

最新推荐文章于 2021-06-29 09:33:50 发布

DavenPortChen.

最新推荐文章于 2021-06-29 09:33:50 发布

阅读量296

点赞数 3

分类专栏： java. 文章标签： java maven ajax

本文链接：https://blog.csdn.net/DavenportChen/article/details/115445480

版权

java. 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

步骤如下：
1.创建项目：
点击Maven后选择Webapp模板创建：
在这里插入图片描述
编辑自己的项目名称：

在这里插入图片描述
选中图片中所标记的地方：

在这里插入图片描述
2.创建好后，进入编译器页面：
在pom.xml中添加servelet引用：

清空web.xml中内容，写入servlet的web.xml:
在这里插入图片描述
在main目录底下创建Java源文件的根路径：

在这里插入图片描述
3.按照从前端到后端的顺序写如代码：
<1> 在webapp目录下创建前端 . html 目录写入实现前端计算器代码：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="jquery-1.9.1.min.js"></script>// 注意: 此处需引入外部jQuery

    <script>
        function mysub() {
            // todo:非空效验
            jQuery.getJSON("mycalc",{
                "number1":jQuery("#num1").val(),
                "number2":jQuery("#num2").val()
            },function (data) {
                if(data!=null && data.state==200){
                    // 接收后端的响应信息
                    alert(data.sum);
                }else{
                    alert(data.msg);
                }
            });
        }
    </script>
</head>
<body>
<div style="margin-top: 70px;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()">

</div>
</body>
</html>

如何引入外部jQuery？
将jQuery复制粘贴到webapp目录。注意:不是WEB-INF目录。
在这里插入图片描述
此步完成后外部jQuery并未成功引入，还需手动添加才能成功引入。
手动添加步骤如下：

<2>完成后端代码：

在web.xml中设置路由：设置好后使用快捷方式创建后端类：
在这里插入图片描述
创建完成后端类完成后如下，在该类中完成后端代码：

代码如下：

import java.io.IOException;
import java.io.PrintWriter;


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

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json");
        int state = -1; // 200:正常返回
        String msg = ""; // 错误描述信息
        int sum = 0;
        // 1.先从前端获取参数
        String num1 = request.getParameter("number1");
        String num2 = request.getParameter("number2");
        // 非空效验[后端原则：永远不要相信前端]
        if(num1!=null && num2!=null &&
                !num1.equals("") && !num2.equals("")){
            // 2.进行相应的业务处理（进行相加操作）
            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));
    }
}

4.配置Tmcat（每次创建项目都要进行配置）：
步骤如下：
在这里插入图片描述

结果如下：

DavenPortChen.

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
实现ajax版本简单加法计算器（为了掌握ajax的相关操作及servlet项目环境的配置）

步骤如下：1.创建项目：点击Maven后选择Webapp模板创建：编辑自己的项目名称：选中图片中所标记的地方：2.创建好后，进入编译器页面：在pom.xml中添加servelet引用：清空web.xml中内容，写入servlet的web.xml:在main目录底下创建Java源文件的根路径：3.按照从前端到后端的顺序写如代码：<1> 在webapp目录下创建前端 . html 目录写入实现前端计算器代码：代码如下：<!DOCTYPE html>
复制链接

扫一扫