Ajax前后端对接---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+= "" +
                       "" + data[i].name + "" +
                       "" + data[i].age + "" +
                       "" + data[i].sex + "" +
                       ""
              }
               $("#content").html(html);
          });
      })
  })
</script>
</body>
</html>

Ajax前后端对接---Springmvc_第1张图片

Ajax前后端对接---Springmvc_第2张图片

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

你可能感兴趣的:(SpringMVC学习,ajax,json,java,spring)