【SpringMVC】- Ajax异步请求

最新推荐文章于 2022-08-03 20:25:49 发布

_nyc

最新推荐文章于 2022-08-03 20:25:49 发布

阅读量145

点赞数

分类专栏： springmvc ajax 文章标签： ajax springmvc

本文链接：https://blog.csdn.net/nyc__/article/details/119785871

版权

springmvc 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

代码笔记，学习笔记；如有错误，请留言指正

SpringMVC-jQuery-ajax

1. 环境搭建

1.1 创建普通Maven项目

1.2 导包

<dependencies>
  <!--spring web mvc包-->
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.3.8</version>
  </dependency>
  <!--servlet包-->
  <dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>servlet-api</artifactId>
    <version>2.5</version>
  </dependency>
  <!--lombok包: 偷懒神器-->
  <dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.20</version>
  </dependency>
  <!--jackson包 json数据-->
  <dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.12.3</version>
  </dependency>
</dependencies>

1.3 添加Web支持

右键项目名 -> add framework support ->选中Web application-> ok

1.4 编写配置

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">
    <context:component-scan base-package="com.nych.controller"/>
    <mvc:default-servlet-handler/>
    <mvc:annotation-driven/>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

1.5 jQuery

jQuery地址： https://code.jquery.com/jquery-3.6.0.js
将下载后的js文件放入web目录下

在index.jsp中引入

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="static/js/jquery-3.5.1.js"></script>
  </head>
  <body>

  </body>
  <script type="text/javascript">
		
  </script>
</html>

2. Ajax

controller

@RestController
@RequestMapping("/ajax")
public class AjaxController {

    @RequestMapping("/t1")
    public void test(String name, HttpServletResponse response) throws IOException {
        PrintWriter writer = response.getWriter();

        System.out.println("t1 -> parameter：" + name);
        if ("zhangSan".equals(name)){
            writer.print("true");
        }else {
            writer.print("false");
        }
    }

    @RequestMapping("/t2")
    public List<User> test2(){
        ArrayList<User> list = new ArrayList<>();

        list.add(new User(1,21,"张三","男"));
        list.add(new User(2,22,"李四","男"));
        list.add(new User(3,25,"王五","女"));

        return list;
    }

}

t1 Test

文本框失去焦点后发送ajax

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="static/js/jquery-3.5.1.js"></script>
  </head>
  <body>
    用户名：<input type="text" id="userName">
  </body>
  <script type="text/javascript">
    $(function (){
      let userName = $("#userName");
      userName.blur(function (){
        let userNameValue = userName.val();
        console.log(userNameValue);
        $.post({
          url: "/ajax/t1",
          data:{
            name:userNameValue,
          },
          success:function (res){
            alert(res);
          },
          error:function (err){
            alert(err);
          }
        })
      })
    })
  </script>
</html>

t2 test

User

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

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="static/js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<button id="getDataBtn">获取数据</button>
<div class="container">
    <div class="row">
        <div class="col-md-5">
            <table class="table col-md-12">
                <thaed>
                    <tr>
                        <th>id</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                    </tr>
                </thaed>
                <tbody id="content">

                </tbody>
            </table>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    $(function (){
        let btn1 = $("#getDataBtn");
        let content = "";
        btn1.click(function (){
            $.post({
                url: "/ajax/t2",
                data:{},
                success:function (res){
                    console.log(res);
                    for (let x of res) {
                        let item = `<tr>
                                        <td>${x.id}</td>
                                        <td>${x.name}</td>
                                        <td>${x.sex}</td>
                                        <td>${x.age}</td>
                                    </tr>`
                        content += item;
                    }
                    console.log(content);
                    $("#content").html(content);
                }
            })
        })
    })
</script>
</html>

其中 “模板字符串” 非常方便
- 模板字符串使用返单引号(``）包裹
- ${}中可以取出js的变量值
- 如果在jsp中使用 ${}会跟jsp语法中的$ {}冲突，需要在js中使用\${}
```
let item = `<tr>
							<td>${x.id}</td>
	 						<td>${x.name}</td>
							<td>${x.sex}</td>
							<td>${x.age}</td>
						</tr>`
```
了解一下PAJAX