初识jQuery的ajax


    前面有一篇博文,写的是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);
			}
		});
	}





郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。