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