ajax請求數據&JSON字符串


參考: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>
    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM