ajax异步与Servlet交换数据, 以json形式交换, 你甚至可以把一组数据写到json数组里面

本文链接：https://blog.youkuaiyun.com/ljh_csdn/article/details/131095304

文章展示了如何使用jQuery的$.post方法进行异步登录请求，Servlet处理请求并返回JSON数据。当登录成功时，Servlet返回包含登录状态和用户信息的数据，前端接收到后跳转至主页面；登录失败则显示错误信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery异步post并接收返回数据

$.post("login_ajax_Servlet",{
        account:$("#account").val(),
        password:$("#password").val()
        },
        function (response,status,xhr){
        	if (response.login){
            //我传递昵称和学号到主页面
          	window.location.href = "main.html?nickname="+encodeURI(response.nickname)+"&stu_num="+$("#test_ac2").val();
        	}else {
          		$("#tips").text(response.failed);
        	}
      	},"json");

Servlet返回数据给前端

PrintWriter printWriter=response.getWriter();
//这里用' 代替\" 和后面的代码不一样,我修改了,没错
printWriter.write("{'login':true,'nickname':'" + nickname + "'}");
printWriter.flush();
printWriter.close();

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个标题，没啥卵用</title>
<!--  引用jquery，这个不用我教吧，自己去官网拷贝下载-->
    <script src="JS/compressed_jquery.min.js"></script>
</head>
<body>
<!--主体-->
账号：<input type="text" id="account"><br>
密码：<input type="password" id="password"><br>
<button type="button" id="btn">登录按钮</button><br>
<p id="tips">第一次登录会看到这行文本，不是第一次会被替换</p>
</body>

<script>
  $(document).ready(function (){
    $("#tips").text( decodeURIComponent(window.location.href ).split('?')[1] );//decodeURIComponent只解析？后面编码 decodeURI解析全部编码
    $("#btn").click(function (){
      $.post(
            "login_ajax_Servlet",
            {
              account:$("#account").val(),
              password:$("#password").val()
            },
            function (response,status,xhr){
              if (response.login){
                //我传递昵称和学号到主页面
                window.location.href = "main.html?nickname="+encodeURI(response.nickname)+"&stu_num="+$("#test_ac2").val();
              }else {
                $("#tips").text(response.failed);
              }
            },
            "json");
    })
  })
</script>

</html>

Servlet

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "login_ajax_Servlet", value = "/login_ajax_Servlet")
public class login_ajax_Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//一般只有解析post方法才用，get不用
        String account=request.getParameter("account");
        String password=request.getParameter("password");
        System.out.println("账号:"+account+" 密码:"+password);
        try {
            response.setContentType("text/html;charset=utf-8");//不加这个，前端html接收中文会出现乱码
            PrintWriter printWriter=response.getWriter();
            if (UserBean.login(account,password)==true){//用你自己的JDBC链接mysql并返回boolean
                System.out.println("idea终端，账号密码正确");
                String nickname= UserBean.getName(account);
                printWriter.write("{'login':true,'nickname':'" + nickname + "'}");

            }else {
                System.out.println("idea终端显示，账号密码有误");
                printWriter.write("{'login':false,'failed':'账号密码错误'}");
            }
            printWriter.flush();
            printWriter.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}