Spring MVC学习笔记-Ajax

最新推荐文章于 2024-09-25 10:59:43 发布

快乐的小小程序猿

最新推荐文章于 2024-09-25 10:59:43 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/xu_benjamin/article/details/118442663

版权

Spring MVC 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Spring MVC学习

官方文档：https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html
参考视频：【狂神说Java】SpringMVC最新教程IDEA版通俗易懂_哔哩哔哩_bilibili
项目完整代码参考：lexiaoyuan/SpringMVCStudy: My SpringMVC study notes (github.com)、SpringMVCStudy: 我的Spring MVC学习笔记 (gitee.com)

Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

1. 环境搭建

新建module，添加web支持
配置web.xml和springmvc-servlet.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>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc-servlet.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcherServlet</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>
</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
        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.springmvc.controller"/>
    <mvc:default-servlet-handler/>
    <mvc:annotation-driven/>
</beans>

2. 了解`iframe`标签

web目录下新建iframe.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe标签</title>
    <style>
        #show {
            width: 100%;
            height: 500px;
        }
    </style>
    <script>
        window.onload = function() {
            let btn = document.getElementById("btn");
            let tx = document.getElementById("tx");
            let show = document.getElementById("show");
            btn.onclick = function () {
                show.src = tx.value;
            }
        }
    </script>
</head>
<body>
    <div>
        <p>地址：</p>
        <p>
            <label for="tx"></label>
            <input type="text" id="tx">
            <button id="btn">提交</button>
        </p>
    </div>

    <div>
        <iframe id="show"></iframe>
    </div>
</body>
</html>

通过IDEA直接在浏览器中打开，
显示：
输入地址：http://www.lexiaoyuan.club/newera/#/，点击提交
显示：

3. 失去焦点发送请求

新建controller包，和AjaxController.java

package com.springmvc.controller;

@RestController //方法不会走视图解析器，直接返回字符串
@RequestMapping("/ajax")
public class AjaxController {
    @GetMapping("/test1")
    public String ajaxTest1(){  //测试环境是否搭建成功
        return "hello ajax";
    }

    @PostMapping("/test2")
    public void ajaxTest2(String searchName, HttpServletResponse response) throws IOException {
        response.setHeader("Content-type", "text/html;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
        System.out.println("ajaxTest2=>searchName:"+searchName);
        if (searchName.contains("beta")) {
            response.getWriter().print("success:请求成功！"+searchName);
        } else {
            response.getWriter().print("error:请求失败！"+searchName);
        }
    }
}

下载jquery.js到本地，在web目录下新建statics目录，jquery.js放到里面
修改index.jsp。（使用jQuery发送ajax请求）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax Test</title>
    <script src="${pageContext.request.contextPath}/statics/jquery.js"></script>
    <script>
      $(function () {
          $("#search-tx").blur(function () {
              $.post({
                  url: "${pageContext.request.contextPath}/ajax/test2",
                  data: {"searchName": $("#search-tx").val()},
                  success: function (data) {
                      $("#msg").html("data:"+data);
                  },
                  error: function (data) {
                      $("#msg").html("data:"+data);
                  }

              });
          });
      });
    </script>
</head>
<body>
    <input id="search-tx" type="text" placeholder="失去焦点发送请求">
    <span id="msg"></span>
</body>
</html>

打包到Tomcat，并添加lib包，运行
测试：浏览器输入：http://localhost:8080/springmvc_06_ajax/
- 显示：
- 输入：（包含beta字符串会请求成功）

在这里插入图片描述

4.请求用户信息

新增User.java

package com.springmvc.pojo;

public class User {
    private int id;
    private String name;
    private String email;

    public User() {
    }

    public User(int id, String name, String email) {
        this.id = id;
        this.name = name;
        this.email = email;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

AjaxController.java中新增方法处理请求

@GetMapping("/user")
public List<User> ajaxGetUser(){
    List<User> userList = new ArrayList<User>();
    userList.add(new User(1, "lexiaoyuan", "111@11.com"));
    userList.add(new User(2, "lexiaoyuan-alpha", "222@22.com"));
    userList.add(new User(3, "lexiaoyuan-beta", "333@33.com"));
    return userList;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看用户</title>
    <script src="statics/jquery.js"></script>
    <script>
        $(function () {
            $.get({
                url: "ajax/user",
                success: function (data) {
                    console.log(data);
                    let userData = "";
                    for (let i = 0; i < data.length; i++) {
                        userData += "<tr>\n" +
                            "<td>"+data[i].id+"</td>\n" +
                            "<td>"+data[i].name+"</td>\n" +
                            "<td>"+data[i].email+"</td>\n" +
                            "</tr>";
                    }
                    $("#user-info").html(userData);
                },
                error: function (status) {
                    alert("error:" + status);
                }
            });
        });

    </script>
</head>
<body>
<div>
    <table>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>email</td>
        </tr>
        <tbody id="user-info">
        </tbody>
    </table>
</div>
</body>
</html>

浏览器输入：http://localhost:8080/springmvc_06_ajax/user.html
显示：

5. 用户名密码异步验证

AjaxController.java中新增方法处理请求

@PostMapping("/login")
public String login(String username,String password){
    String msg = null;
    if (username != null) {
        if ("admin".equals(username)) {
            msg = "Ok";
        } else {
            msg = "用户名错误";
        }
    }
    if (password != null) {
        if ("123456".equals(password)) {
            msg = "Ok";
        } else {
            msg = "密码错误";
        }
    }
    return msg;  //由于@RestController注解，将msg转成json格式返回，所以需要配置JSON乱码处理
}

在web目录下新增login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="statics/jquery.js"></script>
    <script>
        $(function () {
           $("#username").blur(function () {
               $.post({
                   url: "ajax/login",
                   data : {
                       "username": $("#username").val()
                   },
                   success : function(data) {
                        console.log(data);
                        $("#username-msg").html(data);
                   },
                   error : function(status) {
                       $("#username-msg").html(status);
                   }
               });
           });

            $("#password").blur(function () {
                $.post({
                    url: "ajax/login",
                    data : {
                        "password": $("#password").val()
                    },
                    success : function(data) {
                        console.log(data);
                        $("#pwd-msg").html(data);
                    },
                    error : function(status) {
                        $("#pwd-msg").html(status);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <label for="username">用户名：</label>
        <input id="username" type="text">
        <span id="username-msg"></span>
        <br>
        <label for="password">密码：</label>
        <input id="password" type="text">
        <span id="pwd-msg"></span>
    </div>
</body>
</html>

中文出现乱码，修改springmvc-servlet.xml，配置JSON乱码处理

<mvc:annotation-driven>
    <mvc:message-converters>
        <bean class="org.springframework.http.converter.StringHttpMessageConverter">
            <constructor-arg value="UTF-8"/>
        </bean>
        <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
            <property name="objectMapper">
                <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                    <property name="failOnEmptyBeans" value="false"/>
                </bean>
            </property>
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>