Ajax前後端對接---Springmvc

Frank--7發表於2021-01-05
後端SpringMVC

Springmvc實現

實體類user

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {

   private String name;
   private int age;
   private String sex;

}

我們來獲取一個集合物件，展示到前端頁面

@RequestMapping("/a2")
public List<User> ajax2(){
   List<User> list = new ArrayList<User>();
   list.add(new User("秦疆1號",3,"男"));
   list.add(new User("秦疆2號",3,"男"));
   list.add(new User("秦疆3號",3,"男"));
   return list; //由於@RestController註解，將list轉成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.1.1.min.js"></script>
<script>

   $(function () {
       $("#btn").click(function () {
           $.post("${pageContext.request.contextPath}/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>

在這裡插入圖片描述

在這裡插入圖片描述

成功實現了資料回顯！可以體會一下Ajax的好處！

相關文章