AJax技术

jquery ajax实例教程和一些高级用法

字号+ 作者:H5之家 来源:H5之家 2017-01-17 13:00 我要评论( )

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

jquery ajax的调用方式:jquery.ajax(url,[settings]),

因为实际使用过程中经常配置的并不多,所以这里并没有列出所有参数,甚至部分参数默认值就是最佳实践,根本没必要去自己定义,除非有特殊需求,

如果需要所有参数,可以查看jquery api

jquery ajax常用参数:

红色标记参数都是比较重要的,几乎每个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

//$.get("请求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方法

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • AJAX+servlet实例入门基础教程

    AJAX+servlet实例入门基础教程

    2017-01-17 11:02

  • AJAX学习实例(二)

    AJAX学习实例(二)

    2017-01-17 08:34

  • jQuery ajax() 方法

    jQuery ajax() 方法

    2017-01-15 13:00

  • JavaScript用JSONP跨域请求数据实例详解

    JavaScript用JSONP跨域请求数据实例详解

    2017-01-11 17:03

网友点评