SpringMVC--Ajax异步加载数据&$(function (){ 逻辑代码}) 的意思是让dom结构加载完毕后再去执行逻辑代码

CodeJiao

已于 2022-08-21 22:52:03 修改

阅读量595

点赞数 2

分类专栏： # SSM 文章标签： js java javascript ajax

于 2021-05-09 23:49:55 首次发布

本文链接：https://blog.csdn.net/I_r_o_n_M_a_n/article/details/116573286

版权

SSM 专栏收录该内容

71 篇文章 5 订阅

订阅专栏

1. SpringMVC–Ajax异步加载数据

1.1 实体类user

User.java

package com.tian.pojo;

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

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

1.2 获取集合对象，展示到前端页面

在这里插入图片描述
AjaxController.java

@RestController
public class AjaxController {
    @RequestMapping("/a2")
    public List<User> ajax2() {
        List<User> list = new ArrayList<User>();
        list.add(new User("周天骄", 3, "男"));
        list.add(new User("张有余", 3, "男"));
        list.add(new User("雷磊", 3, "男"));
        return list; //由于@RestController注解，将list转成json格式返回
    }
}

1.3 前端页面

在这里插入图片描述
testAjax.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
    </tbody>
</table>

<script src="${pageContext.request.contextPath}/staticResources/js/jQuery.js"></script>
<script>
    $(function () {
        $("#btn").click(function () {
            $.post("${pageContext.request.contextPath}/a2", function (data) {
                console.log(data)
                let html = "";
                for (let 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>
</body>
</html>