SpringMVC——Ajax

简介

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
• Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

实例：当我们在百度搜索框输入东西时，下边会自动跳出一些关键词。这就是使用Ajax技术实现的。

实现Ajax

实现功能： 当输入的用户名和密码和我们预期的一样时，就在旁边显示OK，否则提示输入错误。

这里我们使用jQuery来实现Ajax技术。jQuery实际上就是JavaScript库，极大地简化了 JavaScript 编程。

1.配置web.xlm，applicationContext.xml

applicationContext.xml

<?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/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">

<!--    扫描包-->
    <context:component-scan base-package="com.dz.controller"/>

<!--    只处理Servlet,不处理静态页面-->
    <mvc:default-servlet-handler/>

<!--    添加注解驱动-->
    <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>

    <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>
</beans>

web.xml

<?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">
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--        和Spring进行连接-->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <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>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping
</web-app>

2.导入jQuery

这里有两种方法进行导入。

1. 使用在线cdn

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

2.到jQuery官网下载，并配置到项目中
使用时需添加以下代码

 <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>

3.编写后端代码

我们只需判断前端传来的数据是否存在在数据库中。

@RestController  //自动返回一个字符串
public class AjaxController {
@RequestMapping("/a3")
    //name,pwd 都是从前端传来的
    public String a3(String name,String pwd) {
        String msg = "";
        //这里的名字应该从数据库获取，
        if (name != null) {
            if ("dzsq".equals(name)) {
                msg = "OK";
            } else {
                msg = "用户名错误";
            }
        }
        if (pwd != null) {
            if ("123456".equals(pwd))
                msg = "OK";
            else
                msg = "密码错误";
        }
        return msg;
    }
}

4.编写.jsp代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录验证</title>
<%--导入jQuery--%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>

    <script>
        function a1() {
             //$符号相当于jQuery   即jQuery.get() 这个方法是对Ajax()进行了包装，底层实际是用Ajax实现的
             $.get({
                 //这里填写后端进行判断的url地址
                 url: "${pageContext.request.contextPath}/a3",
                 //data里面的数据是从前端获取的   $("#name").val() 获取前端数据
                 data:{"name":$("#name").val()},
                 //这里的data是后端传上来的，即msg
                 success: function (data) {
                      if (data.toString()==="OK") {
                          //设置p标签的样式为蓝色
                          $("#nameInfo").css("color", "green");
                      }
                      else {
                          //设置p标签的样式为红色
                          $("#nameInfo").css("color", "red");
                      }
                      //p标签的内容为data（msg）
                      $("#nameInfo").html(data);
                 }
             })
        }
        function a2() {
            $.get({
                url: "${pageContext.request.contextPath}/a3",
                //data里面的数据是从前端获取的
                data:{"pwd":$("#pwd").val()},
                //这里的data是后端传上来的，msg
                success: function (data) {
                    if (data.toString()==="OK")
                        $("#pwdInfo").css("color","green");
                    else
                        $("#pwdInfo").css("color","red");
                    $("#pwdInfo").html(data);
                }
            })
        }
    </script>
</head>
<body>

<p>
<%-- onblur 失去焦点事件   当鼠标从这里移开时，则触发这个事件  --%>
    登录： <input id="name" type="text" onblur="a1()">
    <span id="nameInfo"></span>
</p>

<p>
    密码： <input id="pwd" type="password" onblur="a2()">
    <span id="pwdInfo"></span>
</p>

</body>
</html>

5.效果演示

当用户名和密码错误时

当用户名和密码正确时

6.后话

本次笔记内容全都是根据b站UP主 狂神说 视频整理出来的。这是视频链接。 有兴趣的小伙伴可以看一看，我本人觉得讲的很好。