Ajax_ajax博客-CSDN博客

本文链接：https://blog.csdn.net/mingiao/article/details/115329633

本文介绍了AJAX的基本概念和作用，它允许网页在不完全刷新的情况下更新内容，实现动态交互。同时，讲解了jQuery库的功能，包括元素操作、事件处理等，并提供了下载链接。接着，通过实例展示了如何在Spring MVC环境下使用AJAX进行数据异步加载，以及实现用户名的验证功能。在示例中，利用jQuery的POST方法发送请求，获取并显示用户数据，同时展示了一个简单的前端验证过程。

摘要由CSDN通过智能技术生成

一.Ajax简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

二.Jqury简介

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

到官网去下载jquery ,网址：https://jquery.com/download/

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uPzDHj3o-1617093524074)(D:\Typora_area\img\springMVC\image-20210224152317193.png)]$
在web文件夹下新建文件夹，放入其中

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JPpFVWt9-1617093524077)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20210330160147756.png)]$

三.ajax的运用

实体类

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

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

    <context:component-scan base-package="com.ming.controller"/>
    <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>

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>

1.异步加载数据

AjaxController

@RestController
public class AjaxController {

    @RequestMapping("/a2")
    public List<User> a2(){
        List<User> userList=new ArrayList<User>();

        userList.add(new User("mingiao",20,"男"));
        userList.add(new User("minxiao",21,"男"));
        userList.add(new User("minxue",20,"女"));

        //添加数据
        return userList;
    }

}

jsp页面

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

    <%--引入jqury--%>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>

    <script>
        $(function (){

        $("#btn").click(function (){

            $.post("${pageContext.request.contextPath}/a2",function (data){
<%--                console.log(data);--%>
                var html="";

                for(let i=0;i<data.length;i++){
                    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>

运行效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eO4woQRq-1617093524080)(D:\Typora_area\img\springMVC\image-20210330161212822.png)]$

点击“加载数据”

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5shUhDWD-1617093524084)(D:\Typora_area\img\springMVC\image-20210330161241565.png)]$

2.用户名验证

AjaxController

@RequestMapping("/a3")
public String a3(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;

jsp页面

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

    <%--引入jqury--%>
    <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" οnblur="a1()">
    <span id="userInfo"></span>
</p>

<p>
    密码:<input type="text" id="pwd" οnblur="a2()">
    <span id="pwdInfo"></span>
</p>

</body>
</html>