jQuery Ajax和$.ajax jqXHR实现教程

 普通的ajax事件,在开发过程中可能已经写过一个success,在后续的开发中可能我不想动之前写的success方法,想要重启一个success比如下面代码:

 代码如下 复制代码

$('.btn').click(function () {
$.ajax({
type : 'post',
url : 'test.php',
data : $('form').serialize(),
success : function (data) {
console.log(data + '1');
},
success : function (data) {
console.log(data + '2');
}
});
});
测试结果是:

{"user":"admin","email":"1054770532@qq.com"}2

我们发现后面的success方法覆盖了前面的success方法,测试失败。那么有没有能够写多个success的方法呢?既然jquery能在全球广泛的被采用,这点小需求还是能满足的,这里就用到了今天的重点:jqXHR,先看一段代码了解什么事jqXHR

 代码如下 复制代码

$('.btn').click(function () {
var jqXHR = $.ajax({
type : 'post',
url : 'test.php',
data : $('form').serialize()
});
jqXHR.success(function (data) {
console.log(data + '1');
});
jqXHR.success(function (data) {
console.log(data + '2');
});

});
结果如下:

{"user":"tuisiyuan","email":"1054770532@qq.com"}1
{"user":"tuisiyuan","email":"1054770532@qq.com"}2

由上我们不难发现所谓的jqXHR不过就是$.ajax的返回值,而且两个success方法都被顺序的执行了。

随之jquery版本的改善提高,以后jqXHR可能会弃用success,complete,error方法,而改用done,always,fail方法

 代码如下 复制代码

$('.btn').click(function () {
var jqXHR = $.ajax({
type : 'post',
url : 'test.php',
data : $('form').serialize()
});
  
//done=>success,always=>complete,fail=>error
jqXHR.always(function (data) {
console.log('always:' + data);
}).done(function (data) {
console.log('done:' + data)
});
jqXHR.done(function (data) {
console.log('done:' + data);
});
jqXHR.fail(function (data) {
console.log('fail:' + data);
});

});

jqXHR可以连缀,执行多个done。

时间: 2024-07-29 01:20:28

jQuery Ajax和$.ajax jqXHR实现教程的相关文章

使用jQuery处理AJAX请求的基础学习教程_jquery

$.ajax快捷方法 $.get(url,[data],[callback],[type]) $.post(url,[data],[callback],[type]) 两种方法请求方式不同,其他方式相同. 参数:url[请求地址],data[请求的数据内容(obj对象)],callback[回调函数(只能处理请求成功事件)], type[请求返回数据的编码格式(默认ContentType指定格式)] $.get('/test?x=1'); $.get('/test',{z:2}); $.post

【jQuery教程】基于JQuery框架的AJAX

前几天发了个贴,分享了prototype框架关于AJAX方面的学习过程.然后有人说jquery框架更方便. 正好项目中准备使用thickbox,于是干脆抛弃prototype.js,看起jquery.js了.JQuery确实不错,体积比 Prototype小了许多,而且使用起来更方便更灵活.有人说Prototype像JAVA,正统:而JQuery像Ruby,灵活,更趋于OOP. 小试了下AJAX,感觉比prototype简洁多了,在JQuery中,AJAX有三种实现方式:$.ajax(),$.p

JQUERY中的ajax方法怎样通过JSONP进行远程调用

 这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用,需要的朋友可以参考下 关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用    首先介绍下$.ajax的参数  type:请求方式 GET/POST  url:请求地址  async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步.  dataType:返回的数据类型  jsonp:传递给请求处理程序或

jquery中的ajax方法怎样通过JSONP进行远程调用_jquery

关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/POST url:请求地址 async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步. dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的js

使用jQuery简化Ajax开发 Ajax开发入门_jquery

这篇文章就会带领你见识一下jQuery的哲学,探讨一下他的特性以及功能,并且会做一些ajax的示例,以及如何使用plug- in(插件)来扩展jQuery. 1. 什么是jQuery? jQuery是个很优秀的Javascript库,它诞生于2006年,出自John Resig之手.不管你是一个javascript新手,但是却想尝试一下DOM(Document Object Model)以及Ajax的繁杂,抑或你是个javascript专家级人物,但是已经厌倦了反复的重复那无味的DOM以及Aja

在jquery中的ajax方法怎样通过JSONP进行远程调用_jquery

关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/POST url:请求地址 async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步. dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的js

基于jQuery实现的$.Ajax 验证用户名是否存在代码

  jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP.使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数.数据类型设置为"jsonp" 时,jQuery 将自动调用回调函数. 参数列表: 参数名  类型  描述  url   String (默认: 当前页地址) 发送请求的地址.  type  String (默认: "GET

jquery 验证用户名(ajax验证用户名是否存在)

<%@ page language="c#" contenttype="text/html" responseencoding="gb2312" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

JQuery中使用Ajax赋值给全局变量异常的解决方法

 本篇文章主要是对JQuery中使用Ajax赋值给全局变量异常的解决方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 我们在用JQuery的Ajax从后台提取数据后想把它赋值给全局变量,但是却怎么都赋不进,为什么呢?   原因其实很简单,我们用的Ajax是异步操作,也就是说在你赋值的时候数据还没提取出来,你当然赋不进去,所以只要改成同步操作就行~   方法1:先设置同步在进行Ajax操作      代码如下: //在全局或某个需要的函数内设置Ajax异步为false,也就是同步

Jquery中的ajax再封装,简化操作介绍

 这篇文章主要介是对Jquery中的ajax再封装,简化操作示例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/