Ajax异步加载数据

最新推荐文章于 2021-11-02 15:47:23 发布

禧哥

最新推荐文章于 2021-11-02 15:47:23 发布

阅读量103

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/xigedd/article/details/116090151

版权

ajax jquery javascript

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Ajax异步加载数据

文章目录

- Ajax异步加载数据

1、目的

从前端不刷新拿到对象，并展示到页面

2、编写User实体

package com.kuang.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;



}

2、编写AjaxController

@RequestMapping("/a2")
    public List<User> a2(){
        List<User> users = new ArrayList<>();

        //添加数据
        users.add(new User("秦疆1号",3,"男"));
        users.add(new User("秦疆2号",3,"男"));
        users.add(new User("秦疆3号",3,"男"));

        return users;
    }

3、编写test2.jsp展示页面

$(function (){}相当于，意思是当文档载入完毕就执行

- window.οnlοad=function(){
//程序段

$.ajax.(url,data,sucess(){})为简写模式
这里回滚函数作用是从后端拿到list后拆分成一个个标签，插入到tbody中
data[i]可以作为对象使用

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}statics/js/jquery-3.6.0.js"></script>
    <script>
        $(function (){
            $("#btn").click(function (){
                /*
                * $.ajax.(url,data,sucess(){})
                * 为简写模式*/
                /*使用post*/
                $.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>"

                    }
                    $("#tbody").html(html)

                })
            })

        })

    </script>

</head>
<body>