參考:https://blog.csdn.net/qq_39268603/article/details/80003265
-
jsp發請求
<script> <%-- 請求所有導師信息--%> $(function () { $.ajax({ url: "/showTutorsListServlet", type: "post", success: function (jsonArray) { var jsonObj = eval(jsonArray);//json字符串轉為數組 console.log(jsonObj); showData(jsonObj); }, error: function (msg) { alert("ajax連接異常:" + msg); } }); }); </script>
-
從后端得到JSON字符串數據
-
方一:可以創建相應實體,list轉為JSON對象
List<Tutor> tutorList = showTutorsListService.getTutorsByDepart(depart); //將list轉換成json對象 JSONArray jsonArray = JSONArray.fromObject(tutorList); //發送數據 resp.getWriter().write(jsonArray.toString());
-
方二:沒有相應實體,也可以直接將字符串拼成JSON數組字符串,像下面那樣。
-
(下面是JSON數組字符串 拼接后的結果)
[ {"specialty":"軟件工程","sex":false,"tutorNo":"20170000","degree":"博士","birth":"2020-06-18","password":"20170000","tutorName":"root","post":"博士","phone":"155","quota":4,"surplusQuota":3,"researchField":"人工智能","depart":"計算機科學與技術學院","email":"124"} ,{"specialty":"計算機","sex":false,"tutorNo":"20170001","degree":"博士","birth":"2020-06-20","password":"20170001","tutorName":"root2","post":"博士","phone":"155","quota":4,"surplusQuota":4,"researchField":"人工智能","depart":"計算機科學與技術學院","email":"124"} ]
-
瀏覽器控制台顯示
-
-
jsp中數據顯示表格
<html> <table class="table table-striped"> <thead> <tr> <th>序列</th> <th>導師所屬院系</th> <th>學科方向</th> <th>導師姓名</th> <th>剩余名額</th> <th>查看導師信息</th> <th>申請導師</th> </thead> <tbody id="content"> </tbody> </table> </html>
<script> <%--數據顯示(表格)--%> function showData(jsonObj) { var serial = 1; var html = ""; for (var i = 0; i < jsonObj.length; i++) {//注意對象的屬性值和實體類的一樣 html += "<tr>" + "<td>" + serial + "</td>" + "<td>" + jsonObj[i].depart + "</td>" + "<td>" + jsonObj[i].specialty + "</td>" + "<td>" + jsonObj[i].tutorName + "</td>" + "<td>" + jsonObj[i].surplusQuota + "</td>" + "<td><input type='submit' id='checkTutorInfoBtn' value='查看詳情' onclick='checkTutor(\"" + jsonObj[i].tutorNo + "\")';></td>" + // "<td><input type='submit' value='申請導師' onclick='applyTutor(\"" + jsonObj[i].surplusQuota + "," + jsonObj[i].tutorNo + "," + jsonObj[i].tutorName + "\")';></td>" + "<td><input type='submit' value='申請導師' onclick='applyTutor(\"" + jsonObj[i].surplusQuota + "\",\"" + jsonObj[i].tutorNo + "\",\"" + jsonObj[i].tutorName + "\")';></td>" + "</tr>"; ++serial; } $('#content').html(html); } </script>