AJax技术

jQuery Ajax 实例 全解析(4)

字号+ 作者:H5之家 来源:H5之家 2015-09-30 17:26 我要评论( )

error Function(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。 TUQHTML5中文学习网 - HTML5先行者学习网 function (XMLHt

error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。TUQHTML5中文学习网 - HTML5先行者学习网
function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request }

global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件

ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

success Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态TUQHTML5中文学习网 - HTML5先行者学习网
function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。TUQHTML5中文学习网 - HTML5先行者学习网
请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。TUQHTML5中文学习网 - HTML5先行者学习网

示例代码,获取博客园首页的文章题目: $.ajax({ type: "get", url: "", beforeSend: function(XMLHttpRequest){ //ShowLoading(); }, success: function(data, textStatus){ $(".ajax.ajaxResult").html(""); $("item",data).each(function(i, domEle){ $(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>"); }); }, complete: function(XMLHttpRequest, textStatus){ //HideLoading(); }, error: function(){ //请求出错处理 } });

 TUQHTML5中文学习网 - HTML5先行者学习网

这里将显示首页文章列表。TUQHTML5中文学习网 - HTML5先行者学习网

 TUQHTML5中文学习网 - HTML5先行者学习网

 TUQHTML5中文学习网 - HTML5先行者学习网

其他TUQHTML5中文学习网 - HTML5先行者学习网

jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。TUQHTML5中文学习网 - HTML5先行者学习网

设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。TUQHTML5中文学习网 - HTML5先行者学习网

jQuery 代码:TUQHTML5中文学习网 - HTML5先行者学习网

$.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData });

 TUQHTML5中文学习网 - HTML5先行者学习网

serialize() 与 serializeArray()TUQHTML5中文学习网 - HTML5先行者学习网

serialize() : 序列表表格内容为字符串。TUQHTML5中文学习网 - HTML5先行者学习网

serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。TUQHTML5中文学习网 - HTML5先行者学习网

示例:TUQHTML5中文学习网 - HTML5先行者学习网

HTML代码:TUQHTML5中文学习网 - HTML5先行者学习网

=Results: =SingleSingle2==Multiple2==="check1"/> check1 ==check2 ==radio1 =="radio2"/> radio2
  • TUQHTML5中文学习网 - HTML5先行者学习网

    serializeArray() 结果为:TUQHTML5中文学习网 - HTML5先行者学习网

    image

    TUQHTML5中文学习网 - HTML5先行者学习网

  •  

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

    相关文章
    • JQuery实现Ajax加载图片的方法

      JQuery实现Ajax加载图片的方法

      2016-02-24 17:01

    • 判断用户是不是为ajax请求

      判断用户是不是为ajax请求

      2016-02-24 17:00

    • Ajax与WEB开发 by alixixi.com

      Ajax与WEB开发 by alixixi.com

      2016-02-11 11:02

    • jQuery.ajax()的相关参数及使用

      jQuery.ajax()的相关参数及使用

      2016-02-08 16:00

    网友点评
    <