當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Ajax前后端对接---Springmvc

發(fā)布時間：2023/12/3 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax前后端对接---Springmvc 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Springmvc實現(xiàn)

實體類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="獲取數(shù)據(jù)"/> <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>

成功實現(xiàn)了數(shù)據(jù)回顯！可以體會一下Ajax的好處！

總結

以上是生活随笔為你收集整理的Ajax前后端对接---Springmvc的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。