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

pcdd

已于 2023-04-21 19:28:48 修改

阅读量5.9k

点赞数 6

分类专栏： Jakarta EE 文章标签： jsp ajax json

于 2020-03-24 18:48:11 首次发布

本文链接：https://blog.csdn.net/weixin_43553153/article/details/105077206

版权

Jakarta EE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前端代码
后端代码
运行结果
个人总结（踩过的坑）

前端代码

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);
    }
    
}

运行结果

正确的运行结果
将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 + "\"}";
建议使用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 路径尽量不要出现中文（估计也没人用）

pcdd

关注

6
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
使用JQuery的$.ajax()方法请求Servlet

如果在form内，就不要写和，会提交表单刷新页面json的键/值对用逗号隔开，不能用分号dateType是预期服务器返回的数据类型(html,script,json,text等)，dateType指定的是什么类型，servlet就要返回什么类型建议使用Jackson、gson、fastjson等类库dataType错误类型错误：后台返回的dataType类型和前台写的不一致会跳入error。
复制链接

扫一扫

专栏目录