• SpringMVC 10 Ajax技术

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

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

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

    10.2 JQuery’s AJAX

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    <%--
  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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

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

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    xhr 请求 状态码：

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

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

    在这里插入图片描述
    在这里插入图片描述

    10.3 AJAX 异步加载数据

    1. 建立一个 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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述
    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;
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

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

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

    1. 写一个 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>Titletitle>
    <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 += "" +
                        "" + res[i].name + "" +
                        "" + res[i].age + "" +
                        "" + res[i].gender + ""
                        +""
                }
                console.log(html);
                $("#content").html(html);
            }
        });
        // 在这个地方写 会失效。必须在 success 里面 及时的去 执行相关代码
    });
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    success 接收过来数据，最好 就即使的 去处理。别放到 外面的作用域，否则会出现 一些 取不到数据或数据自动消失的情况。

    在这里插入图片描述

  • 相关阅读:
    【正则表达式】
    C#多线程下的调优
    DP27 跳跃游戏(二)
    java编程输出菱形
    网络靶场实战-物联网安全qiling框架初探
    安卓开发-基础知识补习10
    【跨境电商】EDM邮件营销完整指南（二）：如何开展EDM营销活动
    很多人都在考的PMP认证到底有什么用？考试内容难不难？
    【操作系统——内存连续分配管理方式】
    【mysql为什么采用b+树作为索引】
  • 原文地址：https://blog.csdn.net/qq_52606908/article/details/125962599