前面有一篇博文，写的是ajax请求时，返回json字符串和json数组的场景，今天，将原始的ajax修改为jQuery版的ajax。
jQuery对ajax做了很多的封装，使得ajax使用起来非常的方便，省去了很多代码。
闲话少说，直接看代码吧。
代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Json</title>
<!-- 引入jQuery库 -->
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<br><br>
<input type="button" value="JsonStr" onclick="jsonStr()" />
<br><br>
<table>
<tr>
<td>username</td>
<td><input id="username"></td>
</tr>
<tr>
<td>id</td>
<td><input id="id"></td>
</tr>
</table>
<br><br><br>
<input type="button" value="JsonArr" onclick="jsonArr()" />
<br><br>
<table border="1" bordercolor="red">
<caption>Json Array</caption>
<thead>
<tr>
<th>Username</th>
<th>Id</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</body>
<script type="text/javascript">
// json字符串处理方法
function jsonStr() {
$.ajax({
url: "jsonStr",
dataType: "json",
success: function(data) {
$("#username").val(data.name);
$("#id").val(data.id);
}
});
}
// json数组处理方法
function jsonArr() {
$.ajax({
url: "jsonArr",
dataType: "text",
success: function(data) {
// 创建代码片段，用于存放表格行
var oFragment = document.createDocumentFragment();
// 根据json数组长度，产生行数据
for (var i=0; i<data.length; i++) {
var trObj = document.createElement("tr");
trObj.innerHTML = "<td>" + data[i].name + "</td><td>" + data[i].id + "</td>";
oFragment.appendChild(trObj);
}
// 将行数据添加在表格的tBody部分
$("#tb").html(oFragment);
}
});
}
</script>
</html>
代码讲解
1 使用jQuery的第一步，便是引入jQuery库，这里我将jQuery库放在了项目根目录下面的js文件夹下面。
<!-- 引入jQuery库 -->
<script type="text/javascript" src="js/jquery.js"></script>
2 json字符串处理方法
// json字符串处理方法
function jsonStr() {
$.ajax({
url: "jsonStr",
dataType: "json",
success: function(data) {
$("#username").val(data.name);
$("#id").val(data.id);
}
});
}
jQuery中，我们无需再去new XMLHttpRequest()，也无需再去关注浏览器间的兼容问题，这里jQuery已经帮我们处理好了，字节使用 $.ajax 就可以了；
在回调函数中，老式的写法中，需要写
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 4 && xhr.status == 200) {
但是 jQuery 的写法中，一个 success： function(data) { 就可以了，是否简便了许多呢？
附上老式的ajax请求代码
function jsonStr() {
/** 老式写法
var xhr = new XMLHttpRequest();
xhr.open("get", "jsonStr");
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 4 && xhr.status == 200) {
// 将json字符串转换为json对象
var obj = eval("(" + data.target.responseText + ")");
document.getElementById("username").value = obj.name;
document.getElementById("id").value = obj.id;
}
};
xhr.send(null);
*/
$.ajax({
url: "jsonStr",
dataType: "json",
success: function(data) {
$("#username").val(data.name);
$("#id").val(data.id);
}
});
}
时间： 2024-10-29 10:45:39