Ajax异步加载数据

Massimo_ycw

于 2022-07-03 15:16:44 发布

阅读量224

点赞数

分类专栏： SpringMVC 文章标签： ajax java

本文链接：https://blog.youkuaiyun.com/Massimo__JAVA/article/details/125584856

版权

SpringMVC 专栏收录该内容

25 篇文章

订阅专栏

本文将介绍如何在Java项目中使用Ajax实现异步加载数据。首先，我们创建了User实体类；接着，展示了AjaxController类的设计，用于处理Ajax请求；最后，详细讲解了在test2.jsp页面中如何配置和调用Ajax请求，实现实时数据更新的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、编写实体类

沿用上一篇博客“Ajax入门”项目！

User类：

package com.massimo.pojo;

public class User {

    private String name;
    private int age;
    private String sex;

    public User() {
    }

    public User(String name, int age, String sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    public String getName() {
        return name;
    }

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

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

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

二、AjaxController类

package com.massimo.controller;

import com.massimo.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@RestController
public class AjaxController {

    @RequestMapping("/a2")
    public List<User> a2(){
        List<User> userList = new ArrayList<User>();
        //添加数据
        userList.add(new User("马西莫1",20,"男"));
        userList.add(new User("马西莫2",19,"男"));
        userList.add(new User("马西莫3",18,"男"));
        return userList;
    }
}

三、test2.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/JQuery3.6.0.js"></script>
    
    <script>
        $(function () {
            $("#btn").click(function () {
            // $.post(url,param[可以省略],success)
                $.post("${pageContext.request.contextPath}/a2",function (data) {
                    var html = "";
                    for (var 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>
</head>
<body>
<input type="button" value="加载数据" id="btn">
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tbody id="content">
            <%-- 数据：后台拿--%>
        </tbody>
    </table>
</body>
</html>

效果：
在这里插入图片描述