1、Ajax(异步交互)
前言:页面跳转的方式有两种,一种是转发,另一种是重定向
转发:forward,页面地址的url不会发生变化,SpringMVC中需要视图解析器的配合
重定向:redirect,页面地址url会发生变化,SpringMVC中不需要视图解析器的配合
Ajax:通俗的来讲就是,在url不刷新的状态下,实现页面的交互(刷新)
Ajax的意义在于:提高用户的体验度,使用户使用起来更加的友好!!!
1.1、简介
- 什么是ajax:ajax用于实现网页的异步交互!
- Ajax的功能:
- 注册是,输入用户名自动检测用户是否存在
- 登录时,提示用户名或者密码错误
- 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据删除成功后,在页面DOM中将数据行也删除
1.2、Ajax的使用(例一)
-
首先新建一个module,并添加web的支持
-
配置web.xml(注册DispatchServlet、绑定配置文件、设置优先级、过滤乱码、配置映射地址)
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <!--1.注册DispatcherServlet:这是SPringMVC的核心,请求分发器,前端的控制器--> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!--关联一个springmvc的配置文件:【servlet-name】-servlet.xml DispatchServlet必须要绑定Spring的配置文件!!! --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc-servlet.xml</param-value> </init-param> <!--启动级别-1 和服务器一块启动--> <load-on-startup>1</load-on-startup> </servlet> <!--/ 匹配所有的请求;(不包括.jsp)--> <!--/* 匹配所有的请求;(包括.jsp)--> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!--2. 配置SpringMVC的乱码过滤 这个是Spring默认的乱码过滤器--> <filter> <filter-name>encoding</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> </filter> <!-- / 匹配所有的请求;(不包括.jsp)--> <!-- /* 匹配所有的请求;(包括.jsp)--> <filter-mapping> <filter-name>encoding</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>
-
配置SpringMVC所绑定的配置文件(记得添加Json的乱码过滤)
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!--自动扫描包,让指定包下的注解生效,由IOC容器统一管理 --> <context:component-scan base-package="com.qin.controller"/> <!--其实,实际的开发中,下面这两个支持注解的开发是不用写的--> <mvc:default-servlet-handler /> <!-- <mvc:annotation-driven />--> <!--用来解决JSON乱码问题的解决--> <mvc:annotation-driven> <mvc:message-converters register-defaults="true"> <bean class="org.springframework.http.converter.StringHttpMessageConverter"> <constructor-arg value="UTF-8"/> </bean> <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="objectMapper"> <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean"> <property name="failOnEmptyBeans" value="false"/> </bean> </property> </bean> </mvc:message-converters> </mvc:annotation-driven> <!-- 视图解析器 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver"> <!-- 前缀 --> <property name="prefix" value="/WEB-INF/jsp/" /> <!-- 后缀 --> <property name="suffix" value=".jsp" /> </bean> </beans>
-
下载jQuery.js文件jQuery 在官网进行下载【使用的方法如下:两种方式:方式一,在线文档的形式;方式二:下载到本地,进行调用】
-
前端的index.jsp页面
<%-- Created by IntelliJ IDEA. User: 26287 Date: 2022/5/20 Time: 19:24 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <%-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script> <script> function a1(){ $.post({ url:"${pageContext.request.contextPath}/a1", data:{"name":$("#name").val()}, success:function (data){ alert(data); } }) } </script> </head> <body> <%-- 失去焦点的时候,发起一个请求--%> 用户名:<input type="text" id="name" οnblur="a1()"/> </body> </html>
介绍:当用户名输入框,失去焦点的时候,自动的调用Ajax进行判断
-
后端的AjaxController控制类
@RequestMapping("/a1") public void a1(String name, HttpServletResponse response) throws IOException { System.out.println("name is=="+name); if("qin".equals(name)){ response.getWriter().println("true"); }else { response.getWriter().println("false"); } }
-
展示的效果如下:
1.3、Ajax的使用(例二,模仿登录界面)
-
前端的login.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script> <script> function a1(){ $.post({ url:"${pageContext.request.contextPath}/aj3", data:{'name':$("#name").val()}, success:function (data) { if (data.toString()=='OK'){ $("#userInfo").css("color","green"); }else { $("#userInfo").css("color","red"); } $("#userInfo").html(data); } }); } function a2(){ $.post({ url:"${pageContext.request.contextPath}/aj3", data:{'pwd':$("#pwd").val()}, success:function (data) { if (data.toString()=='OK'){ $("#pwdInfo").css("color","green"); }else { $("#pwdInfo").css("color","red"); } $("#pwdInfo").html(data); } }); } </script> </head> <body> <p> 用户名:<input type="text" id="name" οnblur="a1()"/> <span id="userInfo"></span> </p> <p> 密码:<input type="text" id="pwd" οnblur="a2()"/> <span id="pwdInfo"></span> </p> </body> </html>
-
前端的AjaxController页面
package com.qin.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @RestController // 直接返回字符串,不走这个视图解析器,以json字符串的形式返回 public class AjaxController { @RequestMapping("/t1") public String test(){ return "hello"; } @RequestMapping("/a1") public void a1(String name, HttpServletResponse response) throws IOException { System.out.println("name is=="+name); if("qin".equals(name)){ response.getWriter().println("true"); }else { response.getWriter().println("false"); } } @RequestMapping("/aj3") public String ajax3(String name,String pwd){ String msg =" "; // 模拟数据库中存在的数据 if(name!=null){ if("admin".equals(name)){ msg = "OK"; }else { msg = "用户名输入错误"; } } if (pwd!=null){ if("123456".equals(pwd)){ msg = "OK"; }else { msg = "密码输入有误"; } } return msg; } }
-
展示效果
- 失败的页面
-
成功的页面
1.4、总结
对于前后端分离的项目来说很Ajax还有Json的学习重要,尤其是,对于后端的工作人员,更应该掌握这个Ajax和json的学习!!!