狂神说 springmvc 25集：Ajax异步加载数据_Ajax（二）

25,Ajax异步加载数据

1，Springmvc实现

实体类user

User.java

 package com.study.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.java

 @RequestMapping("/a2")
 public List<User> a2(){
     List<User> userList = new ArrayList<User>();
 ​
     //添加数据
     userList.add( new User("test1",1,"男") );
     userList.add( new User("test2",2,"女") );
     userList.add( new User("test3",3,"男") );
     return userList;//由于@RestController注解，将list转成json格式返回
 ​
 }

3,前端页面

test2.jsp

 <%@ 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 (){
                 /*
                $.post (url, param(可以省略)，success)
                 */
                 $.post("${pageContext.request.contextPath}/a2",function (data){
                     var html = "";
 ​
                     for (let 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>

成功实现了数据回显！可以体会一下Ajax的好处！

posted @ 2022-05-22 22:26  坚持做  阅读(45)  评论(0)    收藏  举报