本例主要使用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=" 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 }
运行截图：
