������������������������ ������������������������������������������������������������������������������������������Java���������������������������������POJO������������������������������������

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor@NoArgsConstructor
public class TableData {
    private Integer id;
    private String username;
    private String sex;
    private String city;
}

������������������������������������������������������������������������ID���������������������������������������

������������������������ ���������������������������������������������RESTful API endpoint���������������������������Spring Boot���������������������������������������������

@RestController
@RequestMapping("/")
public class TableController {
    @RequestMapping("table/user")
    @ResponseBody
    public List
    
      findAll() {
        List
     
       list = new ArrayList<>();
        TableData tableData1 = new TableData(1, "���������", "12", "������");
        TableData tableData2 = new TableData(2, "���3���", "13", "������");
        TableData tableData3 = new TableData(3, "���4���", "17", "������");
        TableData tableData4 = new TableData(4, "���5���", "18", "������");
        list.add(tableData1);
        list.add(tableData2);
        list.add(tableData3);
        list.add(tableData4);
        return list;
    }
}
     
    

���Controller���������������findAll()���������������������������������������������������������������������������

������AJAX������ ������������������������JavaScript������ jQuery ��������� AJAX ��������������������������������� jQuery ������������������

$(document).ready(function() {
    $('button[type="button"]').click(function() {
        $.ajax({
            url: '/table/user', // ������������API endpoint
            type: 'GET',
            contentType: 'application/json',
            success: function(data) {
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    html += '' +
                                '' + data[i].id + '' +
                                '' + data[i].username + '' +
                                '' + data[i].sex + '' +
                                '' + data[i].city + '' +
                                '';
                }
                $('#content').html(html);
            }
        });
    });
});

������������������������������������������AJAX������������������������/table/user endpoint������������������������������������HTML���������������������������

��������������������������� ���AJAX������������������������������������������������������������������JSON���������������������������JavaScript���������������������������������������������������������������������������������������������������������������������������������������HTML���������������������������������������������