SpringMVC07——Ajax

最新推荐文章于 2024-02-20 22:36:43 发布

七七r

最新推荐文章于 2024-02-20 22:36:43 发布

阅读量91

点赞数

分类专栏： SpringMVC

本文链接：https://blog.csdn.net/weixin_45688141/article/details/116640525

版权

SpringMVC 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

JQuery使用相关

使用在线的CDN

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

下载导入

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

Ajax的核心是XMLHttpRequest对象（XHR）。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以一部方式从服务器获取新数据。
通过JQuery Ajax方法，能够使用Http Get和Http Post从远程服务器伤请求文本、HTML、XML或JSON，同时能够把这些外部数据直接载入网页的被选元素中。

1.配置web.xml和springmvc.xml

```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>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring-mvc.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>encodingFilter</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>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <session-config>
        <session-timeout>15</session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>login.jsp</welcome-file>

    </welcome-file-list>
</web-app>

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

    <!-- 配置SpringMVC -->
    <!-- 1.开启SpringMVC注解驱动 -->
    <mvc:annotation-driven/>
    <!-- 2.静态资源默认servlet配置-->
    <mvc:default-servlet-handler/>

    <!-- 3.配置jsp 显示ViewResolver视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>	
        <!-- 前缀 -->
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <!-- 后缀 -->
        <property name="suffix" value=".jsp"/>
    </bean>
    <!-- 4.扫描web相关的bean -->
    <context:component-scan base-package="com.pp.controller"/>
</beans>

编辑AjaxController

@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.js进行测试

<%@ 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':$("#txtName").val()},
      success:function (data,status) {
        alert(data);
        alert(status);
      }
    });
  }
</script>
  </head>
<body>
<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>
</body>
</html>

创建实体类User

@AllArgsConstructor
@Data
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String sex;
}

注册提示效果

需求：输入正确信息显示OK，如果信息不对显示重新输入

在控制器中添加

@RequestMapping("/a2")
    public String ajax2(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; //由于@RestController注解，将msg转成json格式返回
    }

前端显示页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
     <title>ajax</title>
     <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
     <script>

    function a1(){
        $.post({
            url:"${pageContext.request.contextPath}/a3",
            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}/a3",
            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" onblur="a1()"/>
     <span id="userInfo"></span>
</p>
<p>
      密码:<input type="text" id="pwd" onblur="a2()"/>
     <span id="pwdInfo"></span>
</p>
</body>
</html>