SpringMVC——Ajax技术的简单使用_spring mvc框架中ajax技术的应与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/wpc2018/article/details/115868081

本文介绍Ajax技术在SpringMVC框架中的应用，包括Ajax基本原理、XMLHttpRequest对象使用、jQuery简化Ajax操作等内容，并通过具体示例展示了如何利用Ajax进行数据异步加载及用户登录验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

SpringMVC——Ajax技术的简单使用

SpringMVC——Ajax技术的简单使用

1、什么是Ajax

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，这使得程序能够更快地回应用户的操作。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

2、XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

3、jQuery ajax

关于 jQuery 与 AJAX：

jQuery 提供多个与 AJAX 有关的方法。

jQuery 不是生产者，而是大自然搬运工。

jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。

导入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>

jQuery下载地址

下面的表格列出了所有的 jQuery AJAX 方法：

方法	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

jQuery AJAX 参考手册

4、Ajax的简单测试

环境配置

新建一个Maven项目

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

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/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.cheng.controller"/>
    <!-- 让Spring MVC不处理静态资源 比如 .css, .html, .mp3, .js-->
    <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>
</beans>

编写一个AjaxController

package com.cheng.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;

@Controller
public class AjaxController {
    @RequestMapping("/t2")
    public void test1(String name, HttpServletResponse response) throws IOException {
        System.out.println("name="+name);
        if ("admin".equals(name)){
            response.getWriter().print("true");
        }else{
            response.getWriter().print("false");
        }
    }
}

编写index.jsp测试,记得导入jQuery

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.2.1.js"></script>
   <script>
     function a() {
       $.ajax({
           url:"${pageContext.request.contextPath}/t2",//规定发送请求的 URL。默认是当前页面。
           data:{"name":$("#username").val()},//规定要发送到服务器的数据,这里是一个键值对，键由后台得到
           success:function (data,status){//当请求成功时运行的函数。
               console.log("data="+data);
               console.log("status="+status)
           }
       })
     }
    </script>
  </head>
  <body>
  <%--onblur：失去焦点触发事件--%>
搜索：<input type="text" id="username" οnblur="a()">
  </body>
</html>

启动tomcat测试！打开浏览器的控制台，当我们鼠标离开输入框的时候，可以看到发出了一个ajax的请求！是后台返回给我们的结果！测试成功！

在这里插入图片描述

5、用Ajax异步加载数据

controller层

    @RequestMapping("/t4")
    public List<User> test4() throws JsonProcessingException {
        List<User> userList = new ArrayList<User>();
        userList.add(new User("万里", 1, "男"));
        userList.add(new User("abcd", 2, "男"));
        userList.add(new User("abcde", 2, "男"));
        return userList;
    }

test.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.2.1.js"></script>

    <script>
        $(function () {
            $("#btn").click(function () {
                /*
                  可以简写：$.post(url,param可以为空,回调函数{})
                */
                $.post("${pageContext.request.contextPath}/t4",function(data){
                    //console.log(data);
                    var html = "";
                    for (let i = 0; i < data.length; i++) {//取出数据
                       //将取出的数据按前端的样式拼接
                        html=html+
                            "<tr>"
                            +
                            "<td>"+data[i].name+"</td>"+
                            "<td>"+data[i].age+"</td>"+
                            "<td>"+data[i].sex+"</td>"
                            +
                            "</tr>"
                    }
                    $("#content").html(html);
                })
            })
        });

    </script>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
<%--加载的数据就放在这里--%>
    </tbody>
</table>

</body>
</html>

测试，在页面没刷新的情况下成功加载出数据

在这里插入图片描述

6、Ajax验证用户登录

编写controller

    @RequestMapping("/t5")
    public String test5(String name,String pwd){
        String msg="";
        if(name!=null){
            //这是是一个小小的demo，不是很严谨
            if ("admin".equals(name)){
                msg="ok";
            }else{
                msg="用户名有误，请重新输入";
            }
        }
        if(pwd!=null){
            if ("123456".equals(pwd)){
                msg="ok";
            }else{
                msg="密码有误，请重新输入";
            }
        }
        return msg;
    }

编写测试页面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.2.1.js"></script>

    <script>
        function a1(){
            $.ajax({
                url:"${pageContext.request.contextPath}/t5",
                data:{"name":$("#name").val()},
                success:function (data){
                    if(data.toString()==='ok'){
                        $("#userInfo1").css("color","green");
                    }else{
                        $("#userInfo1").css("color","red");
                    }
                    $("#userInfo1").html(data);
                }
            })

        }window.onload = load;
        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/t5",
                data:{"pwd":$("#pwd").val()},
                success:function(data){
                    if(data.toString()==='ok'){
                        $("#userInfo2").css("color","green");
                    }else{
                        $("#userInfo2").css("color","red");
                    }
                    $("#userInfo2").html(data);
                }
            })
        }
    </script>


</head>
<body>
<p>
<%--失去焦点后应该发送一个请求--%>
    用户名<input type="text" id="name" οnblur="a1()">
    <%--输入成功或者失败的提示信息--%>
    <span id="userInfo1"></span>
</p>
<p>
    密码<input type="password" id="pwd" οnblur="a2()">
    <span id="userInfo2"></span>
</p>

</body>
</html>

测试：

在这里插入图片描述