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

前端代码

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

运行结果

  1. 正确的运行结果
    在这里插入图片描123述
  2. 将type="button"改为type="submit"的运行结果
    在这里插入图片描述
    这里刷新了页面,不是我们想要的结果

个人总结(踩过的坑)

  1. 如果在form内,就不要写<butto></button><input type="submit">,会提交表单刷新页面

  2. json的键/值对用逗号隔开,不能用分号

  3. dateType是预期服务器返回的数据类型(html,script,json,text等),dateType指定的是什么类型,servlet就要返回什么类型

  4. json的格式一定不能写错,尤其是在servlet写的json拼接字符串容易出错:
    String result = "{\"name\":\"" + name + "\",\"age\":\"" + age + "\"}";
    建议使用Jackson、gson、fastjson等类库

  5. dataType错误

    类型错误:后台返回的dataType类型和前台写的不一致会跳入error

    格式错误:jquery1.4之后对json的格式要求非常严格,json格式错误也会跳入error.{“test”:1} 注意格式

    有时,在不需要返回值的情况下,扔按模板格式,设置了dataType:“json”,参数;这时候,ajax传值正确时,出现200返回成功状态下报错的特殊情况。

    如果你在success中使用eval处理数据就是这个错误了!!!

  6. async请求同步异步问题

    async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax, 需要把async=false

  7. data不能不写

    data为空也一定要传"{}“;不然返回的是xml格式的。并提示parsererror. data:”{}"

    parsererror的异常和Header 类型也有关系。及编码header(‘Content-type: text/html; charset=utf8’);

  8. 传递的参数

    必须是ajax支持的编码格式

  9. URL路径问题

    Servlet 路径尽量不要出现中文(估计也没人用)

  • 6
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值