使用 JQuery 的$.ajax()方法请求 Servlet

freeok2020年3月24日大约 3 分钟

前端代码

jsp、html

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE>
<html lang="en">
<head>
    <title>$Title$</title>
</head>
<body>
<form>
    <div style="text-align:center;margin-top: 100px;">
        <input type="text"
               id="txtName"
               name="txtName"
               placeholder="请输入您的姓名">
        <input type="text"
               id="txtAge"
               name="txtAge"
               placeholder="请输入您的年龄">
        <!--
          因为写在了<form>标签里，所以type不能写成submit，不然会刷新页面
          也不能用button标签代替，因为除IE以外的浏览器（包括 W3C 规范）的默认值是 "submit"，也会刷新页面
          保险起见可以不写form标签，可以自己试一试
        -->
        <input type="button"
               id="btn1"
               name="btn1"
               value="提交">
    </div>
</form>

<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
<script type="text/javascript">
    $("#btn1").click(function () {
        let name = $("#txtName").val()
        let age = $("#txtAge").val()
        if (name.trim().length === 0 || age.trim().length === 0) {
            alert('name或age不能为空')
            return
        }
        $.ajax({
            url: "submit-info", // servlet路径，注意contextPath
            type: "post",
            dataType: "json",	// 规定预期的服务器响应的数据类型，有xml、html、text、script、json、jsonp等
            data: {             // 发送到servlet的数据，必须为 Key/Value 格式，能自动转换为请求字符串格式，name和age不用双引号括起来也行
                name: name,     // 必须用逗号隔开，不能是分号
                age: age
            },
            success: function (data) {
                console.log(data)
                alert("您的姓名：" + data.name + "\n您的年龄：" + data.age)
            },
            error: function (err) {
                alert("ajax请求失败！")
                console.log('错误信息', err.responseText)
            }
        })
    })
</script>
</body>

后端代码

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

@WebServlet("/submit-info")
public class TestServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 防中文乱码
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        // 接收json,getParameter()方法的实参必须和json的键名对应
        String name = req.getParameter("name");
        String age = req.getParameter("age");

        // 返回json,拼接字符串容易写错，要细心，建议使用json类库处理
        String result = "{\"name\":\"" + name + "\",\"age\":\"" + age + "\"}";
        resp.getWriter().write(result);
    }
    
}

运行结果

正确的运行结果
![3873631da6ca96959af8cb5d08b15e5f.gif](/figures/使用JQuery的$ajax()方法请求 Servlet/3873631da6ca96959af8cb5d08b15e5f.gif)
将 type="button"改为 type="submit"的运行结果
![d0c31fee59f17e5a75185c42f5492e23.gif](/figures/使用JQuery的$ajax()方法请求 Servlet/d0c31fee59f17e5a75185c42f5492e23.gif)
这里刷新了页面，不是我们想要的结果

个人总结（踩过的坑）

如果在 form 内，就不要写<butto></button>和<input type="submit">，会提交表单刷新页面
json 的键/值对用逗号隔开，不能用分号
dateType 是预期服务器返回的数据类型(html,script,json,text 等)，dateType 指定的是什么类型，servlet 就要返回什么类型
json 的格式一定不能写错，尤其是在 servlet 写的 json 拼接字符串容易出错：
String result = "{\"name\":\"" + name + "\",\"age\":\"" + age + "\"}"; 建议使用 Jackson、gson、fastjson 等类库
dataType 错误类型错误：后台返回的 dataType 类型和前台写的不一致会跳入 error
格式错误：jquery1.4 之后对 json 的格式要求非常严格，json 格式错误也会跳入 error.{“test”:1} 注意格式
有时，在不需要返回值的情况下，扔按模板格式，设置了 dataType:“json”,参数；这时候，ajax 传值正确时，出现 200 返回成功状态下报错的特殊情况。
如果你在 success 中使用 eval 处理数据就是这个错误了！！！
async 请求同步异步问题 async 默认是 true(异步请求),如果想一个 Ajax 执行完后再执行另一个 Ajax, 需要把 async=false
data 不能不写 data 为空也一定要传"{}“；不然返回的是 xml 格式的。并提示 parsererror. data:”{}" parsererror 的异常和 Header
类型也有关系。及编码 header(‘Content-type: text/html; charset=utf8’);
传递的参数必须是 ajax 支持的编码格式
URL 路径问题 Servlet 路径尽量不要出现中文（估计也没人用）