SpringMvc中Ajax使用

最新推荐文章于 2023-02-01 15:05:12 发布

我是泛滥

最新推荐文章于 2023-02-01 15:05:12 发布

阅读量207

点赞数

分类专栏： # Spring

本文链接：https://blog.csdn.net/weixin_45627031/article/details/107833376

版权

Spring 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

首先了解Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

那Ajax可以做什么：

注册时：输入用户名自动检测用户是否存在
登录时：提示用户名密码错误
删除数据时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后在页面Dom中也将数据行删除。
等等…

在这里我们使用Jquery，Jquery中提供了很多Ajax方法：（这里就不作介绍了，不了解可以通过我博客中Jquery基础了解）

需要下载Jquery.js文件导入，也可以使用在线CDN:

1.想要下载Jquery.js在我Jquery基础博客中有链接；(在这里我采用第一种)

2.在线CDN方式：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

首先先通过AJAX返回列返回列表案例:

导入pom.xml配置：

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.2.1.RELEASE</version>
</dependency>

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:aplicationContext.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>
</web-app>

aplicationContext.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
        https://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.fanlan.Controller"/>
    <!--springmvc不处理静态资源-->
    <mvc:default-servlet-handler/>
    <!--支持mvc注解驱动-->
    <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>

前端页面：


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $.post("${pageContext.request.contextPath}/a1",function (data) {
                    console.log(data)
                    var html="";

                    for (var 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"><br>
<table>
    <tr>姓名</tr>
    <tr>年龄</tr>
    <tr>性别</tr>
    <tbody id="content" >
    </tbody>
</table>
</body>
</html>

实体类：

package com.fanlan.pojo;
public class User {
    private String name;
    private int age;
    private String sex;
    //在这里省略构造方法，set get toString

AjaxController

@RestController
public class AjaxController {
    @RequestMapping("/a1")
    public List<User> a1(){
        ArrayList<User> users = new ArrayList<User>();
        users.add(new User("jvaaa",21,"男"));
        users.add(new User("jvaaa",21,"男"));
        users.add(new User("jvaaa",24,"男"));
        return users;
    }
}

实现效果：
在这里插入图片描述
实在是点丑这个页面😂，博主也正在努力中

接下来是一个用户登录案例中AJax实现：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.3.1.js"></script>
    <script>
        function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/a2",
                data:{"name":$("#name").val()},
                success:function (data) {
                    console.log(data)
                    if (data.toString()=="ok"){
                        $("#userinfo").css("color","green")
                    }else {
                        $("#userinfo").css("color","red")
                    }
                    $("#userinfo").html(data)
                }
            });
        }

        function a2() {
            $.post({
                url:"${pageContext.request.contextPath}/a2",
                data:{"pwd":$("#pwd").val()},
                success:function (data) {
                    console.log(data)

                    if (data.toString()=="ok"){
                        $("#pwdinfo").css("color","green")
                    }else {
                        $("#pwdinfo").css("color","red")
                    }
                    $("#pwdinfo").html(data)
                }
            });
        }
    </script>
</head>
<body>
<p>
    用户名:<input type="text" name="name" id="name" onblur="a1()">
    <span id="userinfo"></span>
</p>
<p>
    密码:<input type="text" name="pwd" id="pwd" onblur="a2()">
    <span id="pwdinfo"></span>
</p>

</body>
</html>

AjaxController

@RestController
public class AjaxController {
    @RequestMapping("/a2")
    public String a2(String name, String pwd){
        String msg="";

        if (name!=null){
            if ("admin".equals(name)) {
                msg="ok";
            }else{
                msg="用户名有误";
            }
        }

        if (pwd!=null){
            if ("123".equals(pwd)) {
                msg="ok";
            }else{
                msg="密码有误";
            }
        }
        return msg;
    }
}