在jsp上使用Jquery的$.ajax方法请求Servlet

前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
</head>
<body>
<form action="">
    <div align="center" style="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="jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $("#btn1").click(function () {
    
    
        var name = $("#txtName").val();
        var age = $("#txtAge").val();

        $.ajax({
    
    
            url: "indexServlet",//url是servlet名
            type: "post",
            dataType: "json",
            data: {
    
                 //发送到servlet的数据,必须为 Key/Value 格式,能自动转换为请求字符串格式,name和age不用双引号括起来也行
                name: name,     //必须是逗号,不能是分号
                age: age
            },
            success: function (data) {
    
    
                alert("您的姓名：" + data.name + "\n您的年龄：" + data.age);
            },
            error: function () {
    
    
                alert("请求失败！");
            }
        });
    });
</script>
</body>

后端代码

@WebServlet("/indexServlet")
public class indexServlet 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,拼接字符串容易写错，要细心
        String result = "{\"name\":\"" + name + "\",\"age\":\"" + age + "\"}";
        resp.getWriter().write(result);
    }
}

运行结果

正确的运行结果
将type="button"改为type="submit"的运行结果

这里刷新了页面，不是我们想要的结果

个人总结（踩过的坑）

如果在form内，就不要写<butto></button>和<input type="submit">，会提交表单刷新页面
json的键/值对用逗号隔开，不能用分号
dateType是预期服务器返回的数据类型(html,script,json,text等)，dateType指定的是什么类型，servlet就要返回什么类型
json的格式一定不能写错，尤其是在servlet写的json拼接字符串容易出错：
String result = "{\"name\":\"" + name + "\",\"age\":\"" + age + "\"}";
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路径问题

路径不能有中文

在jsp上使用Jquery的$.ajax方法请求Servlet

前端代码

后端代码

运行结果

个人总结（踩过的坑）

猜你喜欢