初识jQuery的ajax

来源：互联网发布：随机迷宫生成算法编辑：程序博客网时间：2024/06/07 12:12

前面有一篇博文，写的是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: "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数组。

代码讲解

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

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);}});}

0 0