SpringMVC中使用Ajax（带效果图）

最新推荐文章于 2023-09-06 09:40:31 发布

~故事的小黄花~

最新推荐文章于 2023-09-06 09:40:31 发布

阅读量1.5k

点赞数 3

分类专栏： SpringMVC 文章标签： SpringMVC Ajax JSON 效果图

本文链接：https://blog.csdn.net/weixin_45802810/article/details/118927737

版权

Ajax介绍

Ajax即异步的 JavaScript 和 XML，是一种无需重新加载整个网页的情况下，能够更新部分模块的网页技术。使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

Ajax应用场景

注册时，输入用户名自动检测用户是否已经存在；
登陆时，提示用户名密码错误；
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除……

Ajax工具类

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。jQuery 提供多个与 AJAX 有关的方法，通过 jQuery AJAX 方法，我们能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 。所以我们要下载jQuery的jar包，用来进行Ajax的测试。

Ajax测试

前期准备

首先下载jQuery的jar包；
在WEB路径下创建文件夹/statics/js，并将下载好的jar包放入其中；
在SpringMVC的配置文件中设置放行静态资源，不然JavaScript等静态资源会被拦截，导致不能使用.

<mvc:default-servlet-handler />

使用Ajax很多时候需要用到JSON，所以还需要JSON的一些工具类，具体可参考往期博客。

案例1

前端构建一个文本框，当输入内容后，鼠标失去焦点，会触发Ajax请求并向后台发送数据，由控制器进行判断并向前台返回响应。

编写控制器

//使用了RestController就相当于ResponseBody，默认返回的是字符串而不是链接地址。
@RestController
public class AjaxController {
   
   @RequestMapping("/a1")
   public void ajax1(String name , HttpServletResponse response) throws IOException {
   
       if ("admin".equals(name)){
   
           response.getWriter().print("true");
      }else{
   
           response.getWriter().print("false");
      }
  }
}

前端页面index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
   	<title>首页</title>
	<%--导入JavaScript文件--%>
   	<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
   <script>
       function a1(){
     
       		<%--
			url：请求的地址
			data：传送的数据
			success：请求成功后前端做出的响应，该例子是打印传送的数据以及状态（一般为success）
			--%>
           $.post({
     
               url:"${pageContext.request.contextPath}/a1",
               data:{
     'name':$("#txtName").val()},
               success:function (data,status) {
     
                   console.log(data);
                   console.log(status);
              }
          });
      }
   </script>
 </

最低0.47元/天解锁文章

~故事的小黄花~

关注

3
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
SpringMVC中使用Ajax（带效果图）

Ajax介绍Ajax即异步的 JavaScript 和 XML，是一种无需重新加载整个网页的情况下，能够更新部分模块的网页技术。使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。Ajax应用场景注册时，输入用户名自动检测用户是否已经存在；登陆时，提示用户名密码错误；删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除……Ajax工具类Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向
复制链接

扫一扫