初识jQuery的ajax

亦凉 2022-08-08 13:51 262阅读 0赞

前面有一篇博文，写的是ajax请求时，[返回json字符串和json数组][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>
    
    <script type="text/javascript" src="js/jquery.js"></script>
    </head>
    <body>
    	<br><br>
    	<input type="button" value="JsonStr" οnclick="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" οnclick="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: "json",
    			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>

后台的代码与前面的相同，这里不再罗列了，可以参考[ ajax响应json字符串和json数组][json_json]。

# 代码讲解 #

1  使用jQuery的第一步，便是引入jQuery库，这里我将jQuery库放在了项目根目录下面的js文件夹下面。

****  
<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请求代码

[json_json]: http://blog.csdn.net/magi1201/article/details/45851163