SpringMVC AJAX使用

Pursuit_li

于 2023-02-01 15:05:12 发布

阅读量164

点赞数

分类专栏： MVC 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/Pursuit_li/article/details/128834269

版权

MVC 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

SpringMVC AJAX使用

之前在分析 SMBMS 项目的时候稍微了解过其中的 AJAX 的作用和用法，现在学习了 SpringMVC，就要在 SpringMVC 中使用一下 AJAX。本节创建 SpringMCV-08-AJAX 项目学习 AJAX 的使用。

1. 回顾AJAX
AJAX（ Asynchronous Javascript And XML，即异步 JavaScript 和 XML ）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX 不是新的编程语言，而是用于创建更好更快以及交互性更强的 Web 应用程序的技术。

比较典型的 AJAX 应用就是百度的搜索栏，在搜索栏中输入任意字符后百度就会给出可能要搜索的内容的列表，改变输入内容这个列表也会改变，而我们并没有刷新页面获取新信息，这就是通过 AJAX 实现的！

2. 导入jQuery
AJAX 的核心是 XMLHttpRequest 对象（即 XMR ）。XHR 为向服务器发送请求和解析服务器响应提供了接口，能够以异步方式从服务器获取新数据。

JS 原生的 AJAX 就是要通过 XMLHttpRequest 对象实现，不过纯 JS 原生的 AJAX 了解就好，这里直接用 jQuery（一个 JavaScript 代码库，封装了 JavaScript 常用的功能代码）提供的 AJAX 方法！

框架搭建：给 SpringMCV-08-AJAX 项目添加 Web 框架，配置 Web（ Servlet、Filter ），配置 SpringMVC（开启注解、忽略静态资源、视图解析器、扫描注解），发布 war 包并导入 lib 库，这个过程基本是固定的了（基本配置，此处省略）。

然后通过一个简单的请求测试配置是否成功，这样 SpringMVC 的框架就搭建好了！

@RestController
public class AJAXController {

@RequestMapping("/test")
public String Test(){
return "Request Success!";
}
}

由 input 标签设置失去焦点时触发 ATEST 方法，该方法提交了 AJAX 请求，url 为请求的路径，data 为请求时携带的数据，success 为请求成功后调用的函数，这里为弹出对话框，内容为返回数据 data 和状态 status！

在控制器中添加方法处理这个请求

@RestController
public class AJAXController {

@RequestMapping("/ajax")
// 传过来的参数叫 name，用 response 响应数据
public void AJAXTest(String name, HttpServletResponse response) throws IOException {
if ("qiyuan".equals(name)){
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}

如果前端传过来的 name 为 qiyuan，则返回 data 为 true，否则为 false！

运行测试，遇到了 BUG：Uncaught ReferenceError: $ is not defined

这个问题是因为导入的 jQuery 库没有被加载，使用 Maven 的 clean 功能清理一下项目即可！

再次运行测试，返回数据显示成功！

小结：AJAX 和普通的请求一样，都是带着数据向某个地址发起请求，接收返回数据；只不过，在前端使用 AJAX 发起请求，可以使页面不刷新而获取数据，即这个请求和当前页面是异步的！

4. AJAX获取数据
上面的例子只是最简单的 AJAX 的使用，现在再写个例子，用 AJAX 获取实际数据。

首先添加一个实体类 User，只有最基本的三个属性 name、age、gender
————————————————
版权声明：本文为CSDN博主「風栖祈鸢」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43560701/article/details/120118245

然后将 jQuery 导入到项目中，可以去官网下载 js 文件放到项目的 /web/statics 目录下（静态资源目录），然后用到的时候作为资源导入

3. jQuery AJAX
编写 index.jsp 使用 AJAX，导入 jQuery 库后，可以使用其中的 ajax、get、post 方法，后面两个都是对 ajax 方法的封装！

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>AJAX测试</title>
<script src="${pageContext.request.contextPath}/statics/jquery-3.6.0.js"></script>
<script>
/* $ 符号能点出东西来说明 jQuery 导入成功了 */
function ATEST(){
/* post 方法封装了 ajax 方法*/
$.post({
/* 请求的路径 */
url:"${pageContext.request.contextPath}/ajax",
/* 携带的数据 */
/* 这里将 username 的值命名为 name 发送，后端接收的是 name */
data:{'name':$("#username").val()},
/* 成功后执行回调函数 */
success:function (data,status){
alert(data);
alert(status);
}
});
}
</script>
</head>
<body>
<%-- onblur 失去焦点触发 ATEST 事件--%>
用户名:<input type="text" id="username" οnblur="ATEST()"/>
</body>
</html>

5. AJAX验证登录

在之前 SMBMS 项目中就有这个功能，可以动态地提示输入的用户名是否存在，而不用等到和密码一起提交时再验证。现在就可以自己实现这个功能了！

Pursuit_li

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC AJAX使用

SpringMVC AJAX使用之前在分析 SMBMS 项目的时候稍微了解过其中的 AJAX 的作用和用法，现在学习了 SpringMVC，就要在 SpringMVC 中使用一下 AJAX。本节创建 SpringMCV-08-AJAX 项目学习 AJAX 的使用。
复制链接

扫一扫

专栏目录