您的位置：首页 > Web前端 > JQuery

jquery Ajax方法总结

2017-07-06 00:00 295 查看

摘要: 在jquery中ajax实现方法分类很多种，如有：load、jQuery.get、jQuery.post、jQuery.getScript、jQuery Ajax 事件、jQuery.ajaxSetup等等，这几&#...

1. $.load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中

•url：是指要导入文件的地址。
•data：可选参数，发送至服务器的 key/value 数据；因为Load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件时，我们可以把要传递的参数放在这里。
•callback：可选参数；是指调用load方法并得到服务器响应后(不需要是success的)，再执行的另外一个函数，包含参数：responseText, textStatus, XMLHttpRequest。

下面是几个示例：

1.加载一个php文件，该php文件不含传递参数

$("#myID").load("/test.php");//在id为#myID的元素里导入test.php运行后的结果

2.加载一个php文件，该php文件含有一个传递参数

$("#myID").load("/test.php",{"name":"Adam"});//导入的php文件含有一个传递参数，类似于请求url：/test.php?name=Adam

3. 加载一个php文件，该php文件含有多个传递参数。注：参数间用逗号分隔

$("#myID").load("/test.php",{"name":"Adam","site":"www.lhy-seo.com"});//导入的php文件含有一个传递参数，类似于请求url：/test.php?name=Adam&site=www.phpernote.com

4. 加载一个php文件，该php文件以数组作为传递参数

$("#myID").load("/test.php",{'myinfo[]', ["Adam", "www.lhy-seo.com"]});//导入的php文件含有一个数组传递参数。

注意：使用load，默认是get方式传递，如果有data参数，则这些参数都是以post方式传递的，因此，在/test.php里要以POST方式获取data传递的数值。总之，地址后面跟着的参数则永远以get方式传递，而data中的参数传递方式由传递方法（get 或 post）决定！

5.关于callback回调函数

$("#go").click(function(){
$("#myID").load("welcome.php", {"lname":"Cai", "fname":"Adam"}, function(){
$("#myID").fadeIn('slow');
});
});

//在load方法得到服务器响应后，慢慢地显示加载的内容

6.加载页面片段

$("#result").load("/test.html #container");//加载test.html页面中id为container元素中的内容(包含container元素)到本页面id为result的容器中

.load() 方法允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格，紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

$(".load").load("test.html .post",function(responseText,textStatus, XMLHttpRequest){
this;//在这里t
3ff0
his指向的是当前的DOM对象，即$(".ajax.load")[0]
alert(responseText);//请求返回的内容
alert(textStatus);//请求状态：success，error
alert(XMLHttpRequest);//XMLHttpRequest对象
});//动态加载

7. 防止jquery.load使用缓存的方法

缓存这东西，在一定程度上加快了页面的装载，但是也常常给我们带来麻烦。在实际运用中，我们可能会碰到浏览器缓存的问题。解决办法：

1.把下面的语句加在head的javascript文件里，就可以解决问题：

$.ajaxSetup({
cache: false //关闭AJAX相应的缓存
});

2.在test.html后加上特定时间，比如test.html?20170623。

3.在test.html文件的顶部加入以下声明：

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

另外，在使用jquery.load的时候需要注意的是：

（1）如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。

（2）只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。因此，使用load方法时尽量把load方法写在页面顶部。

（3）jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档，并把它插入当前文档。在此过程中，浏览器常会从文档中过滤掉元素，比如 <html>, <title> 或 <head> 元素。结果是，由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。

2.$.get( url, [data], [callback] ):使用get方式来进行异步请求

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。参数为：data，status。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

1.请求test.php页面，忽略返回值：

$.get("test.php");

2.请求test.php页面，传递两个参数，忽略返回值：

$.get("test.php", { name: "John", time: "2pm" } );

3. 显示 test.php 返回值(HTML 或 XML，取决于返回值)：

$.get("test.php", function(data){
alert("Data Loaded: " + data);
});

4. 显示 test.cgi 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数：

$.get("test.cgi", { name: "John", time: "2pm" },function(data){
alert("Data Loaded: " + data);
});

5.回调函数：

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向的是Ajax请求的选项配置信息
alert(data);
alert(textStatus);//请求状态：success，error等等。
//当然这里捕捉不到error，因为error的时候根本不会运行该回调函数
alert(this);
});

6.防止jquery.get方法缓存的方法：

在$.get()的data后面加上新的随机参数，如{data: mydata, stamp: Math.random() }，由于每次数据不一样，故请求后返回的数据不会缓存。

另外也可把$.get()改成$.post()，也可解决此问题。

一劳永逸的解决办法是设置全局参数，$.ajaxSetup({cache:false});这样设置后，基本所有的get请求jquery都会自动加上_1948838字样的附加参数，总体来说与上面的解决方法类似。

比如：

$.get("test.php", { "cid": $drpCountry.val(), "time": new Date().getTime() }, function(data, returnStatus) {})

3. jQuery.post(url,data,success(data, textStatus,jqXHR),dataType)：使用POST方式来进行异步请求

url (String) : 发送请求的URL地址;

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示;

success(data, textStatus, jqXHR): (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法);

type (String) : (可选)规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式一样，都是字符串的。

该函数是简写的Ajax函数，等价于：

$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

Ajax.aspx：
Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");

jQuery 代码：
$.post("Ajax.aspx", { Action: "post", Name: "lulu" },function (data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
alert(data.result);

}, "json");

例子 1

请求 test.php 页面，并一起发送一些额外的数据（同时仍然忽略返回值）：

$.post("test.php", { name: "John", time: "2pm" } );

例子 2

向服务器传递数据数组（同时仍然忽略返回值）：

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

例子 3

使用 ajax 请求发送表单数据：

$.post("test.php", $("#testform").serialize());

例子 4

输出来自请求页面 test.php 的结果（HTML 或 XML，取决于所返回的内容）：

$.post("test.php", function(data){
alert("Data Loaded: " + data);
});

例子 5

向页面 test.php 发送数据，并输出结果（HTML 或 XML，取决于所返回的内容）：

$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});

例子 6

获得 test.php 页面的内容，并存储为 XMLHttpResponse 对象，并通过 process() 这个 JavaScript 函数进行处理：

$.post("test.php", { name: "John", time: "2pm" },
function(data){
process(data);
}, "xml");

例子 7

获得 test.php 页面返回的 json 格式的内容：

$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); //  2pm
}, "json");

注意：

1.由于浏览器安全方面的限制，大多数 "Ajax" 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。
2.如果由 jQuery.post() 发起的请求返回错误代码，那么不会有任何提示，除非脚本已调用了全局的 .ajaxError() 方法。或者对于 jQuery 1.5，jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。

4.jQuery.getScript(url,success(response,status)): 通过 GET 方式请求载入并执行一个 JavaScript 文件。

url (String) : 待载入 JS 文件地址。

success(response,status): (可选) 成功载入后回调函数。

该函数是简写的Ajax函数，等价于：

$.ajax({
url: url,
dataType: "script",
success: success
});

getScript()函数可以远程载入JavaScript脚本并且执行。这个函数可以跨域载入JS文件（神奇……？！）。这个函数的意义是巨大的，它可以很大程度的缩减页面初次载入的代码量，因为你可以根据用户的交互来载入相应的JS文件，而不必在页面初始化的时候全部载入。

$.getScript("test.js", function(){
alert("Script loaded and executed.");
});

载入jQuery 官方颜色动画插件成功后绑定颜色变化动画：

HTML 代码：

<button id="go">Run</button>
<div class="block"></div>

jQuery 代码：

jQuery.getScript

("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
function(){
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});[/code]

5.jQuery.getJSON(url,data,success(data,status,xhr))：通过HTTP GET请求载入JSON数据。

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象

该函数是简写的 Ajax 函数，等价于：

$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});

发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象（映射），那么在附加到 URL 之前将转换为字符串，并进行 URL 编码。

传递给 callback 的返回数据，可以是 JavaScript 对象，或以 JSON 结构定义的数组，并使用 $.parseJSON() 方法进行解析。

示例

使用 AJAX 请求来获得 JSON 数据，并输出结果：

$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});

从 Flickr JSONP API 载入 4 张最新的关于猫的图片：

HTML 代码：

<div id="images"></div>

jQuery 代码：

$.getJSON

("http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});[/code]
从 test.js 载入 JSON 数据，附加参数，显示 JSON 数据中一个 name 字段数据：

$.getJSON

("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});[/code]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航