ajax实现前后端数据交互

1.在做项目的时候，或多或少都会用到ajax来实现前后端数据的交互，接下来我们就看一个简单的实例吧。

实例效果：

点击按钮，发送异步请求，请求后端的数据，显示在网页上。

接下来我们就来实现一下吧。

1.实体类：
TableData.java


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class TableData {
    private  int id;
    private  String username;
    private  String sex;
    private  String city;

}

2.编写Controller,返回数据。

@RestController
@RequestMapping("/")
public class TableController {
    @RequestMapping("table/user")
    @ResponseBody
    public List<TableData> tableData(){
        List<TableData> list = new ArrayList<>();
        TableData tableData1 = new TableData(1,"扎三年","12","北京");
        TableData tableData2  = new TableData(2,"扎3年","13","北京");
        TableData tableData3  = new TableData(3,"扎4年","17","北京");
        TableData tableData4  = new TableData(4,"扎5年","18","北京");
        list.add(tableData1);
        list.add(tableData2);
        list.add(tableData3);
        list.add(tableData4);
        return list;
    }

3.前端使用ajax接收数据。这里我们导入Jquery.

前端index.jsp


<%@ page isELIgnored="false"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun/jsp/jstl/core" %>
<%@taglib prefix="f" uri="http://java.sun/jsp/jstl/fmt" %>

<html>
<head>
    <title>首页</title>
</head>
<body>

<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>城市</td>

    </tr>
    <tbody id="content">
    </tbody>

</table>
<script src="https://cdn.staticfile/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
     $(function () {
         $('#btn').click(function () {
             $.post("table/user",function (data) {
                 console.log(data);
                 var html = "";

                 for(var i = 0; i <data.length;i++){
                     html += "<tr>" +
                    "<td>"+ data[i].id+"</td>"+
                     "<td>"+ data[i].username+"</td>"+
                     "<td>"+ data[i].sex+"</td>"+
                     "<td>"+ data[i].city+"</td>"
                     +"</tr>";
                 }
               $('#content').html(html);

             })
         })
     })

</script>
</body>
</html>