使用ajax将后台返回的json数据类型在前端页面显示

html

<!DOCTYPE html>
<html lang="en">
<style>
    td{
        width: 200px;
        text-align: center;
        padding: 10px;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/jquery-3.6.0.js"></script>
    <script>
       function my(){
            $.ajax({
                url: "/userData",
                type:"post",
                dataType:"json",
                success:function (data) {
                    console.log(data);
                    myFunction(data);
                }
            })};

       function myFunction(arr) {
           var out = "";
           for(let i = 0; i < arr.length; i++) {
               out += "<tr>"
                        + "<td>"+arr[i].id+"</td>"
                        +"<td>"+arr[i].name+"</td>"+
                       "</tr>";
           }
           document.getElementById("content").innerHTML=out;
       }
    </script>
</head>
<body>
<button onclick="my()">ajax02</button>
<table border="1">
    <tr>
        <th>id</th>
        <th>name</th>
    </tr>
    <tbody id="content">

    </tbody>
</table>
</body>
</html>

后台请求

    @RequestMapping("/userData")
    public List<User> list(){
        List<User> list = new ArrayList<>();
        list.add(new User(1,"Java学烂"));
        list.add(new User(2,"JavaScript学好"));
        list.add(new User(3,"Spring全家桶"));
        list.add(new User(4,"数据库（mysql）"));
        return list;
    }