本例主要使用ajax進行異步數據請求，並針對返回數據為json和jsonarray類型的數據處理。
本例中只有前端的代碼，后端代碼不是本文重點，故省略。
后端接口返回數據為：
Json:
{"age":25,"gender":"女","id":"1","name":"Lily","telephone":"13788888"}
JsonArray：
[{"age":25,"gender":"女","id":"1","name":"Lily","telephone":"13788888"},{"age":22,"gender":"男","id":"3","name":"小明","telephone":"13798989898"},{"age":25,"gender":"女","id":"5","name":"Kite","telephone":"13788888"},{"age":22,"gender":"女","id":"6","name":"小紅","telephone":"137111"}]
ajaxDemo.html
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Ajax Demo</title> 5 <link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'> 6 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 7 <!-- 異步獲取數據，並實時展示在頁面上 --> 8 <script type="text/javascript"> 9 <!--處理JsonArray數據--> 10 function getAll() { 11 $.ajax({ 12 url: "/getAllStudentData",//請求地址 13 // data: {name: name, password: password},//提交的數據 14 type: "POST",//提交的方式 15 dataType: "TEXT", //返回類型 TEXT：字符串 JSON XML 16 success: function (data) { // 校驗返回內容，進行跳轉 17 //將獲取到的數據輸出到元素上 18 // $("#showAll").text(data); 19 $("#showAll").hide(); 20 console.log(data); 21 //將JsonArray字符串組裝成為Json對象數組 22 var jsons = eval("(" + data + ")"); 23 // 刪除子元素 24 $("#showAll_Two").empty(); 25 for (var i in jsons) { 26 //jsons[i]表示獲得第i個json對象即JSONObject 27 //jsons[i]通過.字段名稱即可獲得指定字段的值 28 console.log(jsons[i]); 29 var json = JSON.stringify(jsons[i]) 30 // 動態添加子元素 31 $("#showAll_Two").append("<li>" + json + "</li>"); 32 } 33 $("#showAll_One").text("第一個對象的name為：" + jsons[0].name); 34 }, 35 error: function (xhr) { 36 // 失敗輸出HTTP狀態碼 37 alert("調用失敗！HTTP狀態碼：" + xhr.status); 38 } 39 }) 40 } 41 42 //處理json數據 43 function getOne() { 44 var id = $("#studentId").val(); 45 $.ajax({ 46 url: "/getStudentById",//請求地址 47 data: {id: id},//提交的數據 48 type: "POST",//提交的方式 49 dataType: "TEXT", //返回類型 TEXT：字符串 JSON XML 50 success: function (data) { // 校驗返回內容，進行跳轉 51 //將獲取到的數據輸出到元素上 52 $("#showOne").text(data); 53 console.log(data); 54 55 //將json轉換為對象，方便取值 56 var obj = JSON.parse(data); 57 $("li#id").text("ID：" + obj.id); 58 $("li#name").text("姓名：" + obj.name); 59 $("li#age").text("年齡：" + obj.age); 60 $("li#gender").text("性別：" + obj.gender); 61 $("li#telephone").text("手機：" + obj.telephone); 62 }, 63 error: function (xhr) { 64 // 失敗輸出HTTP狀態碼 65 alert("調用失敗！HTTP狀態碼：" + xhr.status); 66 } 67 }) 68 } 69 </script> 70 <link rel="stylesheet" href="css/ajaxStyle.css"> 71 </head> 72 73 <body> 74 <div class="container"> 75 76 <nav class="navbar navbar-inverse"> 77 <div class="container-fluid"> 78 <div class="navbar-header"> 79 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 80 aria-expanded="false" aria-controls="navbar"> 81 <span class="sr-only">Toggle navigation</span> 82 <span class="icon-bar"></span> 83 </button> 84 <a class="navbar-brand" href="#"><strong>demo</strong>.com</a> 85 </div> 86 <div id="navbar" class="navbar-collapse collapse"> 87 <ul class="nav navbar-nav"> 88 <li><a href="/">首頁</a></li> 89 <li class="active"><a href="#">Ajax范例</a></li> 90 </ul> 91 </div><!--/.nav-collapse --> 92 </div><!--/.container-fluid --> 93 </nav> 94 95 <div> 96 <h3 class="page-header">1、查詢所有信息</h3> 97 <div class="row"> 98 <div class="col-md-12"> 99 <button type="submit" class="btn btn-primary" id="subBtnAll" onclick="getAll()">查詢全部</button> 100 <br> 101 <label id="showAll" style="width: 800px;"> 102 未查詢到任何信息！ 103 </label> 104 <br> 105 <ul id="showAll_Two"> 106 </ul> 107 <p id="showAll_One"></p> 108 </div> 109 </div> 110 </div> 111 112 <div> 113 <h3 class="page-header">2、查詢單個信息</h3> 114 <div class="row"> 115 <div> 116 <div class="col-md-12 col-sm-12"> 117 <div class="col-md-2 col-sm-2"> 118 <input type="text" class="form-control" id="studentId" value="1"> 119 </div> 120 <button type="submit" class="btn btn-primary" onclick="getOne()">查詢單個</button> 121 </div> 122 </div> 123 <div class="col-md-12 col-sm-12"> 124 <label id="showOne"> 125 未查詢到任何信息！ 126 </label> 127 </div> 128 <div class="col-md-12 col-sm-12"> 129 <ul> 130 <li id="id">ID：</li> 131 <li id="name">姓名：</li> 132 <li id="age">年齡：</li> 133 <li id="gender">性別：</li> 134 <li id="telephone">手機：</li> 135 </ul> 136 </div> 137 138 </div> 139 </div> 140 </div> 141 </body> 142 143 </html>
ajaxStyle.css
1 /* 2 ajax demo的樣式 3 */ 4 button#subBtnAll { 5 margin-left: 20px; 6 } 7 8 label { 9 margin: 20px; 10 /*margin-top: 20px;*/ 11 /*margin-bottom: 20px;*/ 12 } 13 14 p { 15 margin-left: 20px; 16 } 17 18 ul#showAll_Two { 19 margin-left: -20px; 20 margin-bottom: 20px; 21 } 22 23 ul#showAll_Two li { 24 font-weight: bolder; 25 list-style-type: none; 26 }
運行截圖：
