SpringMVC 10 Ajax技术

最新推荐文章于 2024-08-20 19:48:29 发布

牟泉禹[Dark Cat]

最新推荐文章于 2024-08-20 19:48:29 发布

阅读量151

点赞数

分类专栏：学习笔记文章标签： ajax javascript java

BY-牟泉禹/MuQuanyu

本文链接：https://blog.csdn.net/qq_52606908/article/details/125962599

版权

学习笔记专栏收录该内容

387 篇文章 11 订阅

订阅专栏

10.1 了解 Ajax

我们知道无论是 重定向 还是转发，都会刷新页面重新加载。那么有么有一种技术，可以不刷新页面去更新页面上的数据呢。答案是 “有的！”

AJAX = Asynchronous JavaScript and XML （异步的 JavaScript 和 XML）。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页内容的技术。
AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 WEB 应用程序的技术。

iframe测试体验页面无刷新

其实最接近于 AJAX 的东西，就是 iframe。没有刷新页面，却能改变页面的某个内容。
如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>iframe测试体验页面无刷新</title>
    <script>
        function a(){
            let i = document.getElementById("iframe1");
            let url = document.getElementById("url");
            i.src = url.value;
        }
    </script>
</head>
<body>
<div>
    <p>请输入地址：</p>
    <p>
        <input type="text" id="url">
        <input type="button" value="提交" onclick="a()">
    </p>

</div>
<div>
    <iframe id="iframe1" src="https://www.yuque.com/muquanyu/mhu1q5" frameborder="0" style="width:100%; height: 500px"></iframe>
</div>
</body>
</html>

在这里插入图片描述
利用AJAX可以做：

注册时，输入用户名自动检测用户是否已经存在。
登录时，提示用户名密码是否错误。
删除数据行时，将行ID发送给后台，后台在数据库中删除，然后在所在页面上数据行也被删除。

10.2 JQuery’s AJAX

纯JS 原生态实现的 AJAX 我们不太建议学习和使用。直接使用 JQuery 提供的 AJAX 即可。学习成本低，并且使用起来不是那么麻烦。

通过 JQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时您能够把外部数据直接载入网页的被选元素中。
JQuery 不是生产者，而是大自然的搬运工。
JQuery AJAX 本质就是 XMLHttpRequest，对它进行了封装，方便调用！

下载 JQuery

在这里插入图片描述

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse resp) throws IOException {
        /*我们接收到的数据，是AJAX的data 传递过来的，并没有利用表单和传统传参*/
        System.out.println("a1:param=>" + name);
        if("mqy".equals(name)){
            resp.getWriter().println("true"); // resp 响应一个数据，至于这个数据是 啥格式，咱们可以不管。
        }else{
            resp.getWriter().println("false");
        }
    }

<%--
  Created by IntelliJ IDEA.
  User: muqua
  Date: 2022/7/24
  Time: 19:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script>
      function a(){
        $.post({
          url: "${pageContext.request.contextPath}/a1",
          data: {
            "name": document.getElementById("username").value
            //"name": $("#username").val()
          },
          success: (res) => {
            alert(res);
          }
          /*
          success: function (data) {
            alert(data);
          }
          */
        })
      }
    </script>
  </head>
  <body>
<%--  失去焦点的时候，发起一个请求到 后端--%>
  用户名：<input type="text" id="username" onblur="a()"/>
  </body>
</html>

如果并没有什么反应，没有发送请求。那么你就得 clear 一下项目，并且重启IDEA和重启tomcat项目。
在这里插入图片描述
clear 项目

在这里插入图片描述

xhr 请求状态码：

404 ：找不到请求得 url / 资源
500 ：回调函数有误。可能无法从 Contoller 那里有效的返回数据。

我们在回调函数这里，可以拿到状态码

在这里插入图片描述

10.3 AJAX 异步加载数据

建立一个 pojo 实体类

package top.muquanyu.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

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

在这里插入图片描述
2. 写 Controller 代码

    @RequestMapping("/a2")
    public List<User> a2(){
        User A = new User("A", 18, "男");
        User B = new User("B", 19, "女");
        User C = new User("C", 20, "男");

        List<User> userList = new ArrayList<>();
        userList.add(A);
        userList.add(B);
        userList.add(C);

        return userList;
    }

其实 SpringMVC 是支持返回一个对象或者集合的。也就是说不光光是返回 JSON 字符串。这也是它强大的一个地方。这样进行数据的传输会更加的方便！

在这里插入图片描述
那么如何让这个数据通过 AJAX 异步请求展示到一个界面上呢？

写一个 jsp 界面

<%--
  Created by IntelliJ IDEA.
  User: muqua
  Date: 2022/7/26
  Time: 18:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tbody id="content">
    </tbody>
</table>
<script>
    $("#btn").click(function (){
        $.post({
            url: "${pageContext.request.contextPath}/a2",
            success: (res) => {
            	let html = "";
                for(let i = 0; i < res.length; ++i){
                    html += "<tr>" +
                        "<td>" + res[i].name + "</td>" +
                        "<td>" + res[i].age + "</td>" +
                        "<td>" + res[i].gender + "</td>"
                        +"</tr>"
                }
                console.log(html);
                $("#content").html(html);
            }
        });
        // 在这个地方写 会失效。必须在 success 里面 及时的去 执行相关代码
    });
</script>
</body>
</html>