详解 AJAX-SpringBoot 前后端数据交互-CSDN博客

本文链接：https://blog.csdn.net/qq_41775769/article/details/123122594

本文详细阐述了如何在AJAX与SpringBoot项目中实现前后端异步数据交互，包括AJAX原理、jQuery示例、SpringBoot接收请求的方法，以及在登录验证和成绩查询场景中的应用，展示了从表单提交到数据验证的完整流程。

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

详解 AJAX-SpringBoot 前后端数据交互

1. Ajax 概述

Ajax 的英文全称是 ”Asynchronous JavaScript and XML“，即 ”异步的 JavaScript 和 XML“。其核心是通过 JavaScript 的 XMLHttpRequest 对象，以一种异步的方式，向服务器发送数据请求，并且通过该对象接收请求返回的数据，从而实现客户端与服务器端的数据交互。

优点：Ajax 能够刷新指定的页面区域（局部刷新），而不是刷新整个页面，从而减少客户端和服务器端之间的数据交互传输，提高页面速度，使得用户体验更好。

初体验：基于 jQuery 方式动态绑定事件提交

给【获取验证码】按钮绑定点击事件，当用户点击该按钮时，向后台服务器发送 AJAX 请求获取一个随机验证码，登录页面的整体不重新加载，仅做局部的页面刷新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步请求</title>
    <script type="text/javascript" src="/static/js/jquery-2.0.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
     
            var btn = $("#flush");
            btn.click(function () {
     
                $.ajax({
     
                    url: '/getCode',
                    type:'get',
                    data:'id=1',  //字符串
                    dataType:'text',
                    success:function (data) {
     
                        console.log(data);
                        alert("后台验证码：" + data);
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div style="text-align: center;">
        <h2>用户登录</h2>
        <form>
            用户名：<input type="text" name="username"><br>
            密&emsp;码：<input type="password" name="password"><br>
            验证码：<input type="text" name="code"><br><br>
            <input type="button" value="登录">&emsp;<input type="button" id="flush" value="获取验证码">
        </form>
    </div>
</body>
</html>

SpringBoot 后台接收 AJAX 请求，首先要获取该请求携带的参数 id=1（该参数没有实际意义，仅做演示使用），然后根据请求业务，对该结果进行响应。success 回调函数对响应结果进行展示。

import javax.servlet.http.HttpServletRequest;
import java.util.Random;

@Controller
public class TestController {
   

    @GetMapping("/ajax")
    public String index(){
   
        return "form";
    }

    //SpringBoot接收ajax请求的方式
    //方式一：使用HttpServletRequest request接收请求参数
    @GetMapping("/getCode")
    @ResponseBody
    public String getCode(HttpServletRequest request){
   
        String id = request.getParameter("id");
        System.out.println("AJAX传递的参数：" + id);
        //获取5位验证码
        return randomCodes();
    }

    //方式二：用@Param映射单个值
    @GetMapping("/getCode1")
    @ResponseBody
    public String getCode1(@P