通过ajax输出json格式

深碍√TFBOYSˉ_ 2023-07-13 13:36 18阅读 0赞

## 通过ajax输出json格式 ##

@RequestMapping("/a2")
        @ResponseBody //返回值默认是json格式
        public List<User> ajax2() {
        
    
            List<User> list = new ArrayList<User>();
            list.add(new User("刘啸1",1,"男"));
            list.add(new User("刘啸2",1,"男"));
            list.add(new User("刘啸3",1,"男"));
            list.add(new User("刘啸4",1,"男"));
            list.add(new User("刘啸5",1,"男"));
            return list;//@ResponseBody返回的默认就是json字符串
        }
    }

<%@ 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}/statics/js/jquery-3.4.1.min.js"></script>--%>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
       $(function () {
        
           $("#btn").click(function () {
        
               $.post("${pageContext.request.contextPath}/ajax/a2",function(data){
        
                   console.log(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>
    </body>
    </html>