本例主要使用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
<html>
<head>
<meta charset="UTF-8">
<title>Ajax Demo</title>
<link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 异步获取数据，并实时展示在页面上 -->
<script type="text/javascript">
<!--处理JsonArray数据-->
function getAll() {
$.ajax({
url: "/getAllStudentData",//请求地址
// data: {name: name, password: password},//提交的数据
type: "POST",//提交的方式
dataType: "TEXT", //返回类型 TEXT：字符串 JSON XML
success: function (data) { // 校验返回内容，进行跳转
//将获取到的数据输出到元素上
// $("#showAll").text(data);
$("#showAll").hide();
console.log(data);
//将JsonArray字符串组装成为Json对象数组
var jsons = eval("(" + data + ")");
// 删除子元素
$("#showAll_Two").empty();
for (var i in jsons) {
//jsons[i]表示获得第i个json对象即JSONObject
//jsons[i]通过.字段名称即可获得指定字段的值
console.log(jsons[i]);
var json = JSON.stringify(jsons[i])
// 动态添加子元素
$("#showAll_Two").append("<li>" + json + "</li>");
}
$("#showAll_One").text("第一个对象的name为：" + jsons[0].name);
},
error: function (xhr) {
// 失败输出HTTP状态码
alert("调用失败！HTTP状态码：" + xhr.status);
}
})
} //处理json数据
function getOne() {
var id = $("#studentId").val();
$.ajax({
url: "/getStudentById",//请求地址
data: {id: id},//提交的数据
type: "POST",//提交的方式
dataType: "TEXT", //返回类型 TEXT：字符串 JSON XML
success: function (data) { // 校验返回内容，进行跳转
//将获取到的数据输出到元素上
$("#showOne").text(data);
console.log(data); //将json转换为对象，方便取值
var obj = JSON.parse(data);
$("li#id").text("ID：" + obj.id);
$("li#name").text("姓名：" + obj.name);
$("li#age").text("年龄：" + obj.age);
$("li#gender").text("性别：" + obj.gender);
$("li#telephone").text("手机：" + obj.telephone);
},
error: function (xhr) {
// 失败输出HTTP状态码
alert("调用失败！HTTP状态码：" + xhr.status);
}
})
}
</script>
<link rel="stylesheet" href="css/ajaxStyle.css" rel="external nofollow" >
</head> <body>
<div class="container"> <nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" ><strong>demo</strong>.com</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/" rel="external nofollow" >首页</a></li>
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" >Ajax范例</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav> <div>
<h3 class="page-header">1、查询所有信息</h3>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="subBtnAll" onclick="getAll()">查询全部</button>
<br>
<label id="showAll" style="width: 800px;">
未查询到任何信息！
</label>
<br>
<ul id="showAll_Two">
</ul>
<p id="showAll_One"></p>
</div>
</div>
</div> <div>
<h3 class="page-header">2、查询单个信息</h3>
<div class="row">
<div>
<div class="col-md-12 col-sm-12">
<div class="col-md-2 col-sm-2">
<input type="text" class="form-control" id="studentId" value="1">
</div>
<button type="submit" class="btn btn-primary" onclick="getOne()">查询单个</button>
</div>
</div>
<div class="col-md-12 col-sm-12">
<label id="showOne">
未查询到任何信息！
</label>
</div>
<div class="col-md-12 col-sm-12">
<ul>
<li id="id">ID：</li>
<li id="name">姓名：</li>
<li id="age">年龄：</li>
<li id="gender">性别：</li>
<li id="telephone">手机：</li>
</ul>
</div> </div>
</div>
</div>
</body> </html>
ajaxStyle.css
/*
ajax demo的样式
*/
button#subBtnAll {
margin-left: 20px;
} label {
margin: 20px;
/*margin-top: 20px;*/
/*margin-bottom: 20px;*/
} p {
margin-left: 20px;
} ul#showAll_Two {
margin-left: -20px;
margin-bottom: 20px;
} ul#showAll_Two li {
font-weight: bolder;
list-style-type: none;
}
运行截图：
