jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ajax实例,后面会有一些ajax高级用法

query ajax的调用方式:jquery.ajax(url,[settings]),因为实际使用过程中经常配置的并不多,所以这里并没有列出所有参数,甚至部分参数默认值,就是最佳实践,根本没必要去自己定义,除非有特殊需求,如果需要所有参数,可以查看jquery api

jquery ajax常用参数:

$.ajax({
url: "test.html", //ajax请求地址
cache: false,//(默认: true,dataType为script和jsonp时默认为false)设置为 false 将不缓存此页面,建议使用默认
type:"GET",//请求方式 "POST" 或 "GET", 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
dataType:"json", //根据返回数据类型可以有这些类型可选:xml html script json jsonp text
//发送到服务器的数据,可以直接传对象{a:0,b:1},如果是get请求会自动拼接到url后面,如:&a=0&b=1
//如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
data:{},
//发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。
beforeSend:function(xhr){
//this 默认为调用本次AJAX请求时传递的options参数
},
//context这个对象用于设置ajax相关回调函数的上下文。也就是说,让回调函数内this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数)。
//比如指定一个DOM元素作为context参数,这样就设置了success回调函数的上下文为这个DOM元素。
context: document.body,
//请求成功后的回调函数
success: function(data,textStatus){
//this 调用本次AJAX请求时传递的options参数 ,如果设置context来改变了this,那这里的this就是改变过的
},
//请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。
//如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是"timeout", "error", "notmodified" 和 "parsererror"。
error:function(XMLHttpRequest, textStatus, errorThrown){
// 通常 textStatus 和 errorThrown 之中
// 只有一个会包含信息
// this 调用本次AJAX请求时传递的options参数
},
//请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述成功请求类型的字符串
complete:function(XMLHttpRequest, textStatus) {
//this 调用本次AJAX请求时传递的options参数
},
//一组数值的HTTP代码和函数对象,当响应时调用了相应的代码。例如,如果响应状态是404,将触发以下警报:
statusCode:{
404:function(){
alert('404,页面不存在');
}
}
});

| jquery ajax发送一个get请求,数据返回为json

  实战中最常用到的ajax方式获取数据,一般用get方式  

$.ajax({
type: "GET",
url: "page.php",
dataType:'json',
data: {id:1001},//也可以是字符串链接"id=1001",建议用对象
success: function(data){
console.log("返回的数据: " + data );
}
});

| jquery ajax发送一个post请求,数据返回为json

  实战中最常用到的ajax方式提交数据,提交一般用post方式

  

$.ajax({
type: "POST",
url: "page.php",
dataType:'json',
data: {name:"张三",sex:1},//也可以是字符串链接"name=张三&sex=1",建议用对象
success: function(data){
//实际操作的时候,返回的json对象中可能会有成功错误的判断标记,所以可能也需要判断一下
console.log("返回的数据: " + data );
}
});

| jquery ajax发送一个get请求,简写方式:

  其实就是对ajax的二次封装,大家可以对照ajax的底层api

 

//$.get("请求url","发送的数据对象","成功回调","返回数据类型");
$.get("test.cgi",{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
},'json');

| jquery ajax发送一个POST请求,简写方式:

  其实就是对ajax的二次封装,大家可以对照ajax的底层api

//$.post("请求url","发送的数据对象","成功回调","返回数据类型");
$.post("test.cgi",{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
},'json');

| jquery ajax经常用到的一个工具函数

ajax提交数据的时候,通常是提交一个表单,所以,序列化表单数据就非常有用,如:$("form").serialize()

//完整实例如:(表单html结构不在写)
$("form").on("submit",function(){
var url = this.action; //可以直接取到表单的action
var formData = $(this).serialize();
$.post(url,formData,
function(data){
//返回成功,可以做一个其他事情
console.log(data);
},'json'); //阻止表单默认提交行为
return false
})

| jquery ajax请求成功回调改写成连写方式.done

ajax请求成功通常是使用回调的方式处理返回数据,其实jquery中也可以使用连写方式而不是回调的方式。如下:

//该参数可以是一个函数或一个函数的数组。当延迟成功时,done中函数被调用。回调执行是依照他们添加的顺序。
//一旦deferred.done()返回延迟对象,延迟对象的其它方法也可以链接到了这里,包括增加.done()方法。当延迟解决,web前端开发
$.get("ajax.php").done(function() {
//延迟成功
alert("ok");
}).fail(function(){
//延迟失败;
alert("$.get failed!");
});

jquery ajax连写方式还有一个二合一的方法.then,.then还可以写多个,后面的.then可以使用前面.then中的结果

$.get("test.php").then(
function(){
//延迟成功
},
function(){
//延迟失败;
}
);

jquery ajax还有一个jQuery.when方法

提供一种方法来执行一个或多个对象的回调函数,延迟对象通常表示异步事件。 如果单一延迟传递给jQuery.when ,它是通过这个方法和延迟对象附加的其他方法可访问绑定的回调函数返回的,如defered.then 。
当延迟得到解决或者拒绝,通常的代码创建了原来的延迟,适当的回调将被调用。 如下:

//两个全部请求成功才会执行回调  此api在jquery api的 “工具”一栏下面有详细介绍
$.when($.ajax("p1.php"), $.ajax("p2.php"))
.then(function(){
//两个全部请求成功
}, function(){
//任何一个执行失败
});

jquery ajax的一个实战例子,ajax请求服务集中到service.js中

这里把jquery ajax请求写成一个服务,比如service.js中有如下代码:

//每次都要重复的ajax代码和一些数据处理,全局提示都可以写到这里面了,当然这里面不要有业务逻辑,只做些数据处理和部分提示
function myService(){
return {
query: function (data) {
var _data = data||{};
return $.get("test.php",_data).then(
function(){//延迟成功},
function(){//延迟失败;}
);
},
submit: function (data) {
var _data = data||{};
return $.post("test.php",_data).then(
function(){},
function(){}
);
}
}
}
//当然这里面的 代码应该做模块化处理,而不是直接向这样声明一个全局的myService

本文链接:jquery ajax实例教程和一些高级用法http://www.51xuediannao.com/javascript/jquery_ajax.html

jquery ajax实例教程和一些高级用法的更多相关文章

  1. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  2. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  3. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  4. jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】

    本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...

  5. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  6. Windows 8实例教程系列 - 数据绑定高级实例

    原文:Windows 8实例教程系列 - 数据绑定高级实例 上篇Windows 8实例教程系列 - 数据绑定基础实例中,介绍Windows 8应用开发数据绑定基础,其中包括一些简单的数据绑定控件的使用 ...

  7. 转:jQuery Ajax 实例 全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  8. C#中jQuery Ajax实例(二)

    上一篇写了一个简单的Ajax异步程序,这一次同样是简单的程序,只不过这次先把参数传到一般处理程序(后缀为ashx)中,再把结果传回到页面. 1.html代码: <html xmlns=" ...

  9. C#中jQuery Ajax实例(一)

    目标:在aspx页面输入两参数,传到后台.cs代码,在无刷新显示到前台 下面是我的Ajax异步传值的第一个实例 1.前台html代码: <html xmlns="http://www. ...

随机推荐

  1. plsql连接12cR2 PDB报错ORA-28040/ORA-01017

    http://hbxztc.blog.51cto.com/1587495/1907533 PS: 在数据库服务器上的oracle/network/admin/sqlnet.ora文件添加一行SQLNE ...

  2. redis下的字符串处理

    redis设计一款sds对象[字符串对象] 优点:可跨平台的内存处理zmalloc:内存消耗的线性增长优势:每次加SDS_MAX_PREALLOC(1MB)的空间: 重写了各种字符串操作的函数: 写跨 ...

  3. Java 封装(内部类)

    1.封装 封装是指,一种将抽象性函式接口的实例细节部份包装.隐藏起来的方法.封装可以被认为是一个保护屏障,防止该类的代码和数据被外部类定义的代码随机访问.要访问该类的代码和数据,必须通过严格的接口控制 ...

  4. VIM在Win7上的安装教程

    1.下载 目前VIM在其官网上的最新版本为7.4,Windows版本名称为GVIM,在百度软件中可以下载GVIM的最新版本,建议 在百度上下载,因为比较快.在百度上搜索"GVIM" ...

  5. sqoop mysql--->hive 报错 (ERROR tool.ImportTool: Import failed: java.io.IOException: java.lang.ClassNotFoundException: org.apache.hadoop.hive.conf.HiveConf)

    ERROR tool.ImportTool: Import failed: java.io.IOException: java.lang.ClassNotFoundException: org.apa ...

  6. Linux中使用iptables开放特定端口

    禁止其他主机对该特定主机进行访问和远程连接控制,所以只开放特定端口 只控制INPUT链就可达到控制其他主机对该主机的访问. 1.首先关闭INPUT链 iptables -P INPUT DROP 使用 ...

  7. Notes 20180310 : String第二讲_String的声明与创建

    1  字符串的声明与创建 学习String的第一步就是创建(声明)字符串,我们在这里之所以分为创建和声明(其实是一个意思,都是创建字符串,但两者却有本质的区别)是因为String是一个很特殊的类,它的 ...

  8. 创建ASM实例及ASM数据库(转载)

    --======================== -- 创建ASM实例及ASM数据库 --======================== 一.ASM相关概念 1.什么是ASM(Auto Stor ...

  9. CentOS7安装Oracle11g R2

    文章摘抄自:一支小白,博客地址:http://www.cnblogs.com/startnow/p/7580865.html Centos7安装Oracle 11gR2     =========== ...

  10. Objective-C 方法交换实践(三) - Aspects 源码解析

    一.类与变量 AspectOptions typedef NS_OPTIONS(NSUInteger, AspectOptions) { AspectPositionAfter = 0, /// 原方 ...