jQuery学习笔记之Ajax用法详解,jQuery学习笔记之

作者: 网络应用  发布:2019-09-03

正文实例叙述了jQuery学习笔记之Ajax用法。分享给我们供大家参谋,具体如下:

那篇小说首要介绍了jQuery学习笔记之Ajax用法,结合实例情势相比较详细的剖析计算了jQuery中ajax的相干应用技术,包含ajax央求、载入、管理、传递等,需求的心上人能够参照下

一、Ajax请求

正文实例陈诉了jQuery学习笔记之Ajax用法。共享给大家供大家参谋,具体如下:

1、jQuery.ajax(options)

初稿链接:https://yq.aliyun.com/ziliao/153370

透过 HTTP 央浼加载远程数据。jQuery 底层 AJAX 完成。轻松易用的高层完成见 .get,.post 等。

一、Ajax请求

.ajax()重临其成立的XMLHttpRequest对象。大多数情景下您无需直接操作该对象,但特别处境下可用以手动终止诉求。.ajax() 唯有三个参数:参数 key/value 对象,满含各配备及回调函数新闻。详细参数选项见下。

  1、jQuery.ajax(options)

瞩目: 假如您内定了 dataType 选项,请保管服务器再次来到准确的 MIME 音信,(如 xml 重临 "text/xml")。错误的 MIME 类型恐怕导致不可预感的失实。

    由此 HTTP 诉求加载远程数据。jQuery 底层 AJAX 实现。轻松易用的高层达成见 .get,.post 等。

留心:若是dataType设置为"script",那么在远距离须求时(不在同一个域下),全部POST哀告都将转为GET诉求。(因为将动用DOM的script标签来加载)

    .ajax()重临其创造的XMLHttpRequest对象。大许多地方下你没有须求直接操作该对象,但极其情况下可用来手动终止央求。.ajax() 唯有贰个参数:参数 key/value 对象,包括各铺排及回调函数音讯。详细参数选项见下。

jQuery 1.2 中,您能够跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 情势调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以进行回调函数。数据类型设置为 "jsonp" 时,jQuery 将机关调用回调函数。

    注意:  如若你钦点了 dataType 选项,请确认保障服务器重返正确的 MIME 新闻,(如 xml 再次来到"text/xml")。错误的 MIME 类型只怕形成不可预感的荒谬。

返回值 XMLHttpRequest

    注意:要是dataType设置为"script",那么在长距离央浼时(不在同三个域下),全数POST诉求都将转为GET央浼。(因为将运用DOM的script标签来加载)

参数

    jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 格局调用函数时,如 "myurl?callback=?" jQuery 将自行替换 ? 为正确的函数名,以举办回调函数。数据类型设置为 "jsonp" 时,jQuery 将电动调用回调函数。

options (可选) : AJAX 央浼设置。全部选项都以可选的。
选项

    返回值: XMLHttpRequest

(1)、async (Boolean) : (默认: true)
暗许设置下,全数诉求均为异步央浼。如果须求发送同步伏乞,请将此选项设置为 false。注意,同步诉求将锁住浏览器,客户其余操作必须等待诉求达成才方可实行。

    参数:

(2)beforeSend (Function) : 发送央求前可修改 XMLHttpRequest 对象的函数,如增添自定义 HTTP 头。
XMLHttpRequest 对象是独一无二的参数。那是一个 Ajax 事件。要是回去false能够收回本次ajax必要。

    options (可选) : AJAX 诉求设置。全体选项都以可选的。

function (XMLHttpRequest) {
  this; // 调用本次AJAX请求时传递的options参数
}

    选项

(3)、cache (Boolean) : (私下认可: true,dataType为script时默以为false)
jQuery 1.2 新职能,设置为 false 将不会从浏览器缓存中加载伏乞消息。

    (1)、 async (Boolean)  : (默认: true) 

(4)、complete (Function) : 诉求完毕后回调函数 (央浼成功或倒闭时均调用)。
参数: XMLHttpRequest 对象和一个陈述成功央浼类型的字符串。 那是三个 Ajax 事件

      暗中认可设置下,全体诉求均为异步央浼。即便供给发送同步央浼,请将此选项设置为 false。注意,同步诉求将锁住浏览器,客商另外操作必需等待须要达成才得以执行。

function (XMLHttpRequest, textStatus) {
  this; // 调用本次AJAX请求时传递的options参数
} 

    (2)、 beforeSend (Function)  : 发送央求前可修改 XMLHttpRequest 对象的函数,如加多自定义 HTTP 头。

(5)、contentType (String) : (暗中认可: "application/x-www-form-urlencoded") 发送新闻至服务器时内容编码类型。私下认可值适合大好些个施用场所。

      XMLHttpRequest 对象是独一的参数。那是三个 Ajax 事件。固然回到false能够撤废本次ajax诉求。

(6)、data (Object,String) : 发送到服务器的数码。将活动转变为呼吁字符串格式。GET 恳求中校附加在U安德拉L 后。查看processData选项表达以禁绝此活动调换。
总得为 Key/Value 格式。假若为数组,jQuery 将自行为分裂值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

     function (XMLHttpRequest) {
        this; // 调用本次AJAX请求时传递的options参数
     }

(7)、dataFilter (Function) :给Ajax重回的本来数据的进展预处理的函数。提供data和type四个参数:data是Ajax重回的原来数据,type是调用jQuery.ajax时提供的dataType参数。函数重回的值将由jQuery进一步管理。

    (3)、 cache (Boolean)  : (暗许: true,dataType为script时默以为false) 。jQuery 1.2 新效率,设置为 false 将不会从浏览器缓存中加载诉求消息。

function (data, type) {
  // 对Ajax返回的原始数据进行预处理
  return data // 返回处理后的数据
} 

    (4)、 complete (Function)  : 央浼达成后回调函数 (乞请成功或失败时均调用)。

(8)、dataType (String) : (默许值:智能剖断xml只怕html)
预期服务器重临的数据类型。假若不点名,jQuery 将活动依照 HTTP 包 MIME 消息重回responseXML 或 responseText,并视作回调函数参数传递,可用值:

      参数: XMLHttpRequest 对象和多个描述成功央浼类型的字符串。 这是三个 Ajax 事件

"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 重回纯文本 HTML 新闻;包括的script标签会在插入dom时进行。
"script": 再次来到纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。注意:在中远距离央浼时(不在同多个域下),全部POST央求都将转为GET央求。(因为将选择DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 方式调用函数时,如 "myurl?callback=?" jQuery 将机关替换 ? 为准确的函数名,以实践回调函数。
"text": 重返纯文本字符串

    function (XMLHttpRequest, textStatus) {
        this; // 调用本次AJAX请求时传递的options参数
    } 

(9)、error (Function) : (暗许: 自动判别 (xml 或 html)) 央求失利时调用时间。参数有以下多个:XMLHttpRequest 对象、错误消息、(可选)捕获的荒唐对象。如若爆发了不当,错误信息(第三个参数)除了拿走null之外,还恐怕是"timeout", "error", "notmodified" 和 "parsererror"。Ajax 事件。

    (5)、 contentType (String)  : (暗许: " application/x-www-form-urlencoded ") 发送音讯至服务器时内容编码类型。暗许值适合大许多采纳场地。

function (XMLHttpRequest, textStatus, errorThrown) {
  // 通常 textStatus 和 errorThrown 之中
  // 只有一个会包含信息
  this; // 调用本次AJAX请求时传递的options参数
}

    (6)、 data (Object,String)  : 发送到服务器的多少。将自行转变为呼吁字符串格式。GET 央浼上校附加在U卡宴L 后。查看processData选项表达以禁绝此活动转变。

(10)、global (Boolean) : (暗中认可: true) 是还是不是接触全局 AJAX 事件。设置为 false 将不会接触全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于调节不一致的 Ajax 事件。

      必需为 Key/Value 格式。若是为数组,jQuery 将活动为分化值对应同二个称谓。如  {foo:["bar1", "bar2"]}  转换为 '&foo=bar1&foo=bar2'。

(11)、ifModified (Boolean) : (默许: false) 仅在服务器数据变动时获得新数据。使用 HTTP 包 Last-Modified 头信息决断。

    (7)、 dataFilter (Function)  :给Ajax重返的原来数据的实行预管理的函数。提供data和type四个参数:data是Ajax再次回到的原有数据,type是调用jQuery.ajax时

(12)、jsonp (String) : 在二个jsonp央浼中重写回调函数的名字。那个值用来顶替在"callback=?"这种GET或POST央浼中U奥德赛L参数里的"callback"部分,比方{jsonp:'onJsonPLoad'}会招致将"onJsonPLoad=?"传给服务器。

      提供的dataType参数。函数重临的值将由jQuery进一步管理。

(13)、password (String) : 用于响应HTTP访谈认证央求的密码

      function (data, type) {
        // 对Ajax返回的原始数据进行预处理
        return data // 返回处理后的数据
      } 

(14)、processData (Boolean) : (暗许: true) 暗中同意处境下,发送的数据将被更动为对象(技巧上讲不要字符串) 以相当暗中同意内容类型 "application/x-www-form-urlencoded"。假如要发送 DOM 树新闻或任何不期待调换的音讯,请设置为 false。

    (8)、 dataType (String)  : (暗许值:智能判别xml大概html)

(15)、scriptCharset (String) : 唯有当呼吁时dataType为"jsonp"或"script",况兼type是"GET"才会用于强制修改charset。平日在本地和长距离的源委编码不相同不经常候行使。

        预期服务器再次来到的数据类型。借使不点名,jQuery 将活动根据HTTP 包 MIME 消息重返responseXML 或 responseText,并作为回调函数参数字传送递,可用值:

(16)、success (Function) : 乞请成功后的回调函数。参数:由服务器重临,并基于dataType参数举办拍卖后的数目;描述状态的字符串。 Ajax 事件。

        "xml": 返回 XML 文档,可用 jQuery 处理。
        "html": 再次来到纯文本 HTML 音讯;包括的script标签会在插入dom时实施。
        "script": 重回纯文本 JavaScript 代码。不会自行缓存结果。除非设置了"cache"参数。注意:在长途央求时(不在同三个域下),全数POST乞请都将转为GET央浼。(因为将应用DOM的script标签来加载)
        "json": 返回 JSON 数据 。
        "jsonp": JSONP 格式。使用 JSONP 方式调用函数时,如 " myurl?callback=? " jQuery 将自动替换 ? 为正确的函数名,以推行回调函数。
        "text": 重回纯文本字符串

function (data, textStatus) {
  // data 可能是 xmlDoc, jsonObj, html, text, 等等
  this; // 调用本次AJAX请求时传递的options参数
}

    (9)、 error (Function)  : (暗中同意: 自动剖断 (xml 或 html)) 央浼退步时调用时间。参数有以下多个:XMLHttpRequest 对象、错误消息、(可选)捕获的谬误对象。

(17)、timeout (Number) : 设置诉求超时时间(微秒)。此设置将掩饰全局设置。

      即使发生了错误,错误音信(第三个参数)除了拿走null之外,还可能是"timeout", "error", "notmodified" 和 "parsererror"。Ajax 事件。

(18)、type (String) : (暗许: "GET") 央求格局 ("POST" 或 "GET"), 默感觉 "GET"。注意:另外 HTTP 乞请方法,如 PUT 和 DELETE 也足以应用,但仅部分浏览器援助。

      function (XMLHttpRequest, textStatus, errorThrown) {
        // 通常 textStatus 和 errorThrown 之中
        // 只有一个会包含信息
        this; // 调用本次AJAX请求时传递的options参数
      }

(19)、url (String) : (暗中认可: 当前页地址) 发送须要的地方。

    (10)、 global (Boolean)  : (暗中同意: true) 是或不是接触全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用以调整差异的 Ajax 事件。

(20)、username (String) : 用于响应HTTP访谈认证伏乞的客户名

    (11)、 ifModified (Boolean)  : (暗中同意: false) 仅在服务器数据变动时获得新数据。使用 HTTP 包 Last-Modified 头音信推断。  

(21)、xhr (Function) : 须要回到八个XMLHttpRequest 对象。私下认可在IE下是ActiveXObject 而其余景况下是XMLHttpRequest 。用于重写可能提供三个增进的XMLHttpRequest 对象。这几个参数在jQuery 1.3在先不可用。

    (12)、 jsonp (String)  : 在贰个jsonp央浼中重写回调函数的名字。那几个值用来代替在"callback=?"这种GET或POST诉求中UPRADOL参数里的"callback"部分,

ps:上述肉桂色标明的有的是大非常多ajax调用常用的参数设置,利用那一个参数就足以成功落到实处ajax调用了.

        举个例子 {jsonp:'onJsonPLoad'} 会导致将"onJsonPLoad=?"传给服务器。

示例

    (13)、 password (String)  : 用于响应HTTP访谈认证央求的密码

//jQTest.js
function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  //1、 加载并执行一个 JS 文件
  $.ajax({
    type: "GET",
    url: "js/jqLoadJs.js",
    dataType: "script"
  });
  //2、装载一个 HTML 网页最新版本 
  $.ajax({
    url: "test.htm",
    cache: false, //没有缓存的说
    success: function(html) {
      //alert(html);
      $("#spanGetHtml").css("display", "block");
      $("#spanGetHtml").css("color", "red");
      $("#spanGetHtml").append(html);
    }
  });
  //3、获取并解析一个xml文件(从服务端获取xml)
  $.ajax({
    type: 'GET',
    dataType: 'xml', //这里可以不写,但千万别写text或者html
    url: jqRequestUrl + "?action=jquerGetXmlRequest",
    success: function(xml) {
      //正确解析服务端的xml文件
      $(xml).find("profile").each(function(i) {
        var name = $(this).children("userName").text(); //取对象文本
        var location = $(this).children("location").text();
        alert("Xml at SERVER is gotten by CLIENT:" + name + " is living in " + location);
      });
    },
    error: function(xml) {
      alert('An error happend while loading XML document ');
    }
  });
  //4、发送 XML 数据至服务器(客户端发送xml到服务端)
  var xmlDocument = "<profile>" +
  " <userName>jeff wong</userName>" +
  " <location>beijing</location>" +
  "</profile>";
  $.ajax({
    url: jqRequestUrl + "?action=jqueryXmlRequest",
    processData: false, //设置 processData 选项为 false,防止自动转换数据格式。
    //type: "xml",
    cache: false,
    type: "xml",
    data: xmlDocument,
    success: function(html) {
      alert(html); //弹出提示
      $("#spanResult").css("display", "block");
      $("#spanResult").css("color", "red");
      $("#spanResult").html(html); //给当前dom的一个span元素赋值
    },
    error: function(oXmlHttpReq, textStatus, errorThrown) {
      alert("jquery ajax xml request failed");
      $("#spanResult").css("display", "block");
      $("#spanResult").css("color", "red");
      $("#spanResult").html("jquery ajax xml request failed"); //提示出错
    }
  });
  //5、同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
  var html = $.ajax({
    //没有type 默认为GET方式
    url: jqRequestUrl + "?action=syncRequest",
    async: false
  }).responseText;
  alert(html);
  //6、显式get测试
  $.ajax({
    type: "GET",
    url: jqRequestUrl + "?action=jquery&userName=" + $("#txtUserName").val(),
    cache: false,
    success: function(html) {
      // alert(html); //弹出提示
      $("#spanResult").css("display", "block");
      $("#spanResult").css("color", "red");
      $("#spanResult").html(html); //给当前dom的一个span元素赋值
    },
    error: function(oXmlHttpReq, textStatus, errorThrown) {
      alert("jquery ajax request failed");
      $("#spanResult").css("display", "block");
      $("#spanResult").css("color", "red");
      $("#spanResult").html("jquery ajax request failed"); //提示出错
    }
  });
  //7、显式POST测试 
  $.ajax({
    type: "POST",
    url: jqRequestUrl,
    data: "action=jquerySaveData&userName=jeffwong&location=beijing",
    success: function(html) {
      alert(html);
    }
  });
}

    (14)、 processData (Boolean)  : (私下认可: true) 暗中同意情状下,发送的数额将被调换为目的(技能上讲不要字符串) 以合营暗中同意内容类型

多少个有关文书:

        " application/x-www-form-urlencoded "。假如要发送 DOM 树消息或其余不希望调换的音讯,请设置为 false。

a、管理ajax央浼的服务端文件:AjaxHandler.ashx,对应的cs文件:

    (15)、 scriptCharset (String)  : 唯有当呼吁时dataType为"jsonp"或"script",何况type是"GET"才会用来强制修改charset。平常在本地和远程的内容编码不相同临时候利用。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
using System.Xml;
namespace MyJqTest
{
  public class AjaxHandler : IHttpHandler, IRequiresSessionState
  {
    /// <summary>
    /// 可复用
    /// </summary>
    public bool IsReusable
    {
      get
      {
        return true;
      }
    }
    public void ProcessRequest(HttpContext context)
    {
      AjaxOperations(context);
    }
    private void AjaxOperations(HttpContext context)
    {
      string action = context.Request["action"];
      if (!string.IsNullOrEmpty(action))
      {
        switch (action)
        {
          default:
            break;
          case "jquery":
            ProcessJQueryRequest(context);
            break;
          case "jquerySaveData":
            ProcessJQuerySaveData(context);
            break;
          case "syncRequest":
            ProcessJQuerySyncRequest(context);
            break;
          case "jqueryXmlRequest":
            ProcessJQueryXMLRequest(context);
            break;
          case "jquerGetXmlRequest":
            ProcessJQueryGetXMLRequest(context);
            break;
        }
      }
    }
    private void ProcessJQueryRequest(HttpContext context)
    {
      context.Response.ClearContent();
      context.Response.ContentType = "text/plain"; //设置输出流类型
      context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
      string result = context.Request["userName"].Trim();
      context.Response.Write("You have entered a name:" + result);
    }
    private void ProcessJQuerySaveData(HttpContext context)
    {
      context.Response.ClearContent();
      context.Response.ContentType = "text/plain"; //设置输出流类型
      context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
      string name = context.Request["userName"].Trim();
      string location = context.Request["location"].Trim();
      context.Response.Write("Your data have been saved:your name is " + name + ",living in " + location);
    }
    private void ProcessJQuerySyncRequest(HttpContext context)
    {
      context.Response.ClearContent();
      context.Response.ContentType = "text/plain"; //设置输出流类型
      context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
      context.Response.Write("Your sync ajax request has been processed.");
    }
    /// <summary>
    /// 简单的xml请求处理(服务端从客户端获取xml)
    /// </summary>
    /// <param name="context"></param>
    private void ProcessJQueryXMLRequest(HttpContext context)
    {
      context.Response.ClearContent();
      context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
      XmlDocument doc = new XmlDocument();
      try
      {
        doc.Load(context.Request.InputStream); //获取xml (这里需要注意接受xml数据的方法)
        context.Response.ContentType = "text/plain"; //设置输出流类型
        string name = doc.SelectSingleNode("profile/userName").InnerText;
        string location = doc.SelectSingleNode("profile/location").InnerText;
        context.Response.Write("Your XML data have received,and your name is " + name + ",living in " + location);
      }
      catch (Exception ex)
      {
        context.Response.Write("Get xml data failed.");
        throw ex;
      }
    }
    /// <summary>
    /// 返回简单的xml(服务端返回客户端xml)
    /// </summary>
    /// <param name="context"></param>
    private void ProcessJQueryGetXMLRequest(HttpContext context)
    {
      context.Response.ClearContent();
      context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
      XmlDocument doc = new XmlDocument();
      try
      {
        doc.Load(context.Server.MapPath("/jeffWong.xml"));
        context.Response.ContentType = "text/xml;charset=UTF-8"; //设置输出流类型
        context.Response.Write(doc.OuterXml);
      }
      catch (Exception ex)
      {
        context.Response.Write("Load xml data failed.");
        throw ex;
      }
    }
  }
}

    (16)、 success (Function)  : 央求成功后的回调函数。参数:由服务器再次回到,并依据dataType参数进行管理后的数目;描述状态的字符串。 Ajax 事件。

b、aspx,html和xml文件(直接放在根目录下)

      function (data, textStatus) {
        // data 可能是 xmlDoc, jsonObj, html, text, 等等
        this; // 调用本次AJAX请求时传递的options参数
      }

aspx文件是ajax央浼页面:

    (17)、 timeout (Number) : 设置乞求超时时间(飞秒)。此设置将隐敝全局设置。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery.aspx.cs" Inherits="MyJqTest.JQuery" %>
<!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/1999/xhtml">
<head runat="server">
  <title></title>
  <script src="js/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
      
    <br />
    Please input a name:<input id="txtUserName" type="text" /><input id="btnJQAjax" type="button"
      value="jQuery ajax 请求" onclick="jqAjaxTest()" />
      
  </div>
  <script src="js/jQTest.js" type="text/javascript"></script>
  </form>
</body>
</html>

    (18)、 type (String)  : (暗许: "GET") 需要格局 ("POST" 或 "GET"), 默以为 "GET"。注意:另外 HTTP 供给方法,如 PUT 和 DELETE 也足以动用,但仅部分浏览器

html很简单:

        支持。

test.htm:

    (19)、 url (String)  : (默许: 当前页地址) 发送央浼的地方。

<!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/1999/xhtml" >
<head>
  <title></title>
</head>
<body>
<div>it is a simple ajax test</div>
</body>
</html>

    (20)、 username (String)  : 用于响应HTTP访问认证乞请的客户名

 

    (21)、 xhr (Function)  : 供给重临一个XMLHttpRequest 对象。暗许在IE下是ActiveXObject 而别的意况下是XMLHttpRequest 。用于重写或许提供贰个增高的

xml文件:

        XMLHttpRequest 对象。那么些参数在jQuery 1.3原先不可用。

jeffWong.xml:

     ps:上述的一对是 url  type  dataType  data  success 调用常用的参数设置,利用那多少个参数就足以成功完毕ajax调用了.

<?xml version="1.0" encoding="utf-8" ?>
<profile>
 <userName>jeff wong</userName>
 <location>beijing</location>
</profile>

    示例

c、js文件(放在根目录js文件夹下)

 1 //jQTest.js
 2 function jqAjaxTest() {
 3   var jqRequestUrl = "AjaxHandler.ashx";
 4   //1、 加载并执行一个 JS 文件
 5   $.ajax({
 6     type: "GET",
 7     url: "js/jqLoadJs.js",
 8     dataType: "script"
 9   });
10   //2、装载一个 HTML 网页最新版本 
11   $.ajax({
12     url: "test.htm",
13     cache: false, //没有缓存的说
14     success: function(html) {
15       //alert(html);
16       $("#spanGetHtml").css("display", "block");
17       $("#spanGetHtml").css("color", "red");
18       $("#spanGetHtml").append(html);
19     }
20   });
21   //3、获取并解析一个xml文件(从服务端获取xml)
22   $.ajax({
23     type: 'GET',
24     dataType: 'xml', //这里可以不写,但千万别写text或者html
25     url: jqRequestUrl + "?action=jquerGetXmlRequest",
26     success: function(xml) {
27       //正确解析服务端的xml文件
28       $(xml).find("profile").each(function(i) {
29         var name = $(this).children("userName").text(); //取对象文本
30         var location = $(this).children("location").text();
31         alert("Xml at SERVER is gotten by CLIENT:" + name + " is living in " + location);
32       });
33     },
34     error: function(xml) {
35       alert('An error happend while loading XML document ');
36     }
37   });
38   //4、发送 XML 数据至服务器(客户端发送xml到服务端)
39   var xmlDocument = "<profile>" +
40   " <userName>jeff wong</userName>" +
41   " <location>beijing</location>" +
42   "</profile>";
43   $.ajax({
44     url: jqRequestUrl + "?action=jqueryXmlRequest",
45     processData: false, //设置 processData 选项为 false,防止自动转换数据格式。
46     //type: "xml",
47     cache: false,
48     type: "xml",
49     data: xmlDocument,
50     success: function(html) {
51       alert(html); //弹出提示
52       $("#spanResult").css("display", "block");
53       $("#spanResult").css("color", "red");
54       $("#spanResult").html(html); //给当前dom的一个span元素赋值
55     },
56     error: function(oXmlHttpReq, textStatus, errorThrown) {
57       alert("jquery ajax xml request failed");
58       $("#spanResult").css("display", "block");
59       $("#spanResult").css("color", "red");
60       $("#spanResult").html("jquery ajax xml request failed"); //提示出错
61     }
62   });
63   //5、同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
64   var html = $.ajax({
65     //没有type 默认为GET方式
66     url: jqRequestUrl + "?action=syncRequest",
67     async: false
68   }).responseText;
69   alert(html);
70   //6、显式get测试
71   $.ajax({
72     type: "GET",
73     url: jqRequestUrl + "?action=jquery&userName=" + $("#txtUserName").val(),
74     cache: false,
75     success: function(html) {
76       // alert(html); //弹出提示
77       $("#spanResult").css("display", "block");
78       $("#spanResult").css("color", "red");
79       $("#spanResult").html(html); //给当前dom的一个span元素赋值
80     },
81     error: function(oXmlHttpReq, textStatus, errorThrown) {
82       alert("jquery ajax request failed");
83       $("#spanResult").css("display", "block");
84       $("#spanResult").css("color", "red");
85       $("#spanResult").html("jquery ajax request failed"); //提示出错
86     }
87   });
88   //7、显式POST测试 
89   $.ajax({
90     type: "POST",
91     url: jqRequestUrl,
92     data: "action=jquerySaveData&userName=jeffwong&location=beijing",
93     success: function(html) {
94       alert(html);
95     }
96   });
97 }

jqLoadJs.js  测试ajax加载js文件用

2、load(url,[data],[callback])

复制代码 代码如下:

  载入远程 HTML 文件代码并插入至 DOM 中。

alert("this is a ajax request script test");

  默许使用 GET 格局 - 传递附加参数时自动转变为 POST 格局。jQuery 1.第22中学,可以钦赐采用符,来筛选载入的 HTML 文书档案,DOM 上将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

2、load(url,[data],[callback])

  返回值 jQuery

载入远程 HTML 文件代码并插入至 DOM 中。

  参数

暗中认可使用 GET 格局 - 传递附加参数时自动调换为 POST 格局。jQuery 1.第22中学,能够钦点选取符,来筛选载入的 HTML 文书档案,DOM 少将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。

     url (String)  : 待装入 HTML 网页网站。

返回值 jQuery

     data (Map,String)  : (可选) 发送至服务器的 key/value 数据。在jQuery 1.3中也足以承受多个字符串了。

参数

     callback (Callback)  : (可选) 载入成功时回调函数。

url (String) : 待装入 HTML 网页网站。
data (Map,String) : (可选) 发送至服务器的 key/value 数据。在jQuery 1.3中也得以接受二个字符串了。
callback (Callback) : (可选) 载入成功时回调函数。

  示例

示例:

1 function jqAjaxTest() {
2   $("#spanResult").load("test.htm");
3   $("#spanResult").css("display", "block");
4   $("#spanResult").css("color", "red");
5 }
function jqAjaxTest() {
  $("#spanResult").load("test.htm");
  $("#spanResult").css("display", "block");
  $("#spanResult").css("color", "red");
}

3、jQuery.get(url,[data],[callback],[type])

3、jQuery.get(url,[data],[callback],[type])

  通过远程 HTTP GET 需要载入消息。

经过中远距离 HTTP GET 央浼载入音讯。

  那是一个简练的 GET 乞求效用以代表复杂 .ajax。伏乞成功时可调用回调函数。即便必要在失误时执行函数,请使用.ajax。

那是二个简便的 GET 央求成效以替代复杂 .ajax。央浼成功时可调用回调函数。就算须求在失误时施行函数,请使用.ajax。

  返回值  XMLHttpRequest

返回值  XMLHttpRequest

  参数

参数

     url (String)  : 待载入页面包车型大巴UWranglerL地址

url (String) : 待载入页面的U昂CoraL地址
data (Map) : (可选) 待发送 Key/value 参数。
callback (Function) : (可选) 载入成功时回调函数。
type (String) : (可选) 再次回到内容格式,xml, html, script, json, text, _default。

     data (Map)  : (可选) 待发送 Key/value 参数。

示例

     callback (Function)  : (可选) 载入成功时回调函数。

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  $.get(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqGetNormalCallBack, 'text'); //返回数据类型
}
function jqGetNormalCallBack(oData) {
  $("#spanResult").html(oData);//这里直接json数据绑定了,下一个jquery方法会有处理
  $("#spanResult").css("display", "block");
  $("#spanResult").css("color", "red");
}

     type (String)  : (可选) 再次来到内容格式,xml, html, script, json, text, _default。

AjaxHandler.ashx代码:

  示例

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
using System.Xml;
namespace MyJQTest
{
  public class AjaxHandler : IHttpHandler, IRequiresSessionState
  {
    /// <summary>
    /// 可复用
    /// </summary>
    public bool IsReusable
    {
      get
      {
        return true;
      }
    }
    public void ProcessRequest(HttpContext context)
    {
      AjaxOperations(context);
    }
    private void AjaxOperations(HttpContext context)
    {
      string action = context.Request["action"];
      if (!string.IsNullOrEmpty(action))
      {
        switch (action)
        {
          default:
            break;
          case "jquery":
            ProcessJQueryRequest(context);
            break;
        }
      }
    }
    private void ProcessJQueryRequest(HttpContext context)
    {
      context.Response.ClearContent();
      context.Response.ContentType = "text/plain"; //设置输出流类型
       context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
       string userName = context.Request["userName"].Trim();
      string location = context.Request["location"].Trim();
      string jsonObject = "{"userName":"" + userName + "","location":"" + location + ""}";
      context.Response.Write(jsonObject);
    }
  }
}
1 function jqAjaxTest() {
2   var jqRequestUrl = "AjaxHandler.ashx";
3   $.get(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqGetNormalCallBack, 'text'); //返回数据类型
4 }
5 function jqGetNormalCallBack(oData) {
6   $("#spanResult").html(oData);//这里直接json数据绑定了,下一个jquery方法会有处理
7   $("#spanResult").css("display", "block");
8   $("#spanResult").css("color", "red");
9 }

ps:本例中,大家再次来到的是一段json类型的数据,在客商端从未对json类型数据开展拍卖,在下三个主意(jQuery.getJSON)中会立异管理的。

  ps:本例中,我们回到的是一段json类型的多寡,在客商端从未对json类型数据实行拍卖,在下一个措施(jQuery.getJSON)中会立异管理的。

4、jQuery.getJSON(url,[data],[callback])

4、jQuery.getJSON(url,[data],[callback])

通过 HTTP GET 央求载入 JSON 数据。

  通过 HTTP GET 诉求载入 JSON 数据。

在 jQuery 1.2 中,您能够因此接纳JSONP 格局的回调函数来加载别的网域的JSON数据,如 "myurl?callback=?"。jQuery 将电动替换 ? 为准确的函数名,以实践回调函数。
瞩目:此行之后的代码就要那么些回调函数推行前实行。

  在 jQuery 1.2 中,您能够透过利用JSONP 格局的回调函数来加载其余网域的JSON数据,如 "myurl?callback=?"。jQuery 将机关替换 ? 为准确的函数名,以试行回调函数。 
  注意:此行之后的代码就要这些回调函数试行前施行。

返回值  XMLHttpRequest

  返回值  XMLHttpRequest

参数

  参数

url (String) : 发送须求地址。
data (Map) : (可选) 待发送 Key/value 参数。
callback (Function) : (可选) 载入成功时回调函数。

     url (String)  : 发送乞求地址。
     data (Map)  : (可选) 待发送 Key/value 参数。
     callback (Function)  : (可选) 载入成功时回调函数。

示例

  示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  //getJSON方法调用
  $.getJSON(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqGetJsonCallBack); //返回json数据类型
}
//对json数据进行处理 (oData是json类型的数据)
function jqGetJsonCallBack(oData) {
  var oJsonStr = "";
  //取json中的数据,并呈现
  oJsonStr += "userName:" + oData.userName + "  location:" + oData.location + "<br/>";
  //在div中显示所有数据
  $("#divResult").html(oJsonStr);
  $("#divResult").css("display", "block");
  $("#divResult").css("color", "red");
}
 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx";
 3   //getJSON方法调用
 4   $.getJSON(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqGetJsonCallBack); //返回json数据类型
 5 }
 6 //对json数据进行处理 (oData是json类型的数据)
 7 function jqGetJsonCallBack(oData) {
 8   var oJsonStr = "";
 9   //取json中的数据,并呈现
10   oJsonStr += "userName:" + oData.userName + "  location:" + oData.location + "<br/>";
11   //在div中显示所有数据
12   $("#divResult").html(oJsonStr);
13   $("#divResult").css("display", "block");
14   $("#divResult").css("color", "red");
15 }

5、jQuery.getScript(url,[callback])

5、jQuery.getScript(url,[callback])

通过 HTTP GET 伏乞载入并试行三个 JavaScript 文件。

  通过 HTTP GET 央求载入并执行三个 JavaScript 文件。

jQuery 1.2 版本以前,getScript 只好调用同域 JS 文件。 1.第22中学,您能够跨域调用 JavaScript 文件。注意:Safari 2 或更早的本子无法在大局功能域中一齐实施脚本。如果经过 getScript 插足脚本,请走入延时函数。

  jQuery 1.2 版本在此之前,getScript 只好调用同域 JS 文件。 1.第22中学,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不可能在全局功能域中一齐推行脚本。要是经过 getScript 参加脚本,请步向延时函数。

返回值  XMLHttpRequest

  返回值  XMLHttpRequest

参数

  参数

url (String) : 待载入 JS 文件地方。
callback (Function) : (可选) 成功载入后回调函数。

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

示例

     callback (Function)  : (可选) 成功载入后回调函数。

function jqAjaxTest() {
  var jsUrl = "js/jqLoadJs.js";
  //getScript方法调用
  $.getScript(jsUrl, jqGetJsCallBack);
}
//oData返回的是整个js路径下js文件内容
function jqGetJsCallBack(oData) {
  alert(oData);
}

  示例

6、jQuery.post(url,[data],[callback],[type])

1 function jqAjaxTest() {
2   var jsUrl = "js/jqLoadJs.js";
3   //getScript方法调用
4   $.getScript(jsUrl, jqGetJsCallBack);
5 }
6 //oData返回的是整个js路径下js文件内容
7 function jqGetJsCallBack(oData) {
8   alert(oData);
9 }

经过远距离 HTTP POST 央求载入音讯。

6、jQuery.post(url,[data],[callback],[type])

这是两个简易的 POST 央求成效以代表复杂 .ajax。要求成功时可调用回调函数。假设须要在阴差阳错开上下班时间实施函数,请使用.ajax。

  通过远程 HTTP POST 乞求载入消息。

返回值  XMLHttpRequest

  那是一个简约的 POST 央浼功效以替代复杂 .ajax。央求成功时可调用回调函数。借使急需在阴差阳错开上下班时间施行函数,请使用.ajax。

参数

  返回值  XMLHttpRequest

url (String) : 发送必要地址。
data (Map) : (可选) 待发送 Key/value 参数。
callback (Function) : (可选) 发送成功时回调函数。
type (String) : (可选) 再次来到内容格式,xml, html, script, json, text, _default。

  参数

示例

     url (String)  : 发送需要地址。

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); //返回text数据类型
}
function jqPostCallBack(oData) {
  //在div中显示所有数据
  $("#divResult").html(oData);
  $("#divResult").css("display", "block");
  $("#divResult").css("color", "red");
}

     data (Map)  : (可选) 待发送 Key/value 参数。

二、Ajax事件

     callback (Function)  : (可选) 发送成功时回调函数。

1、ajaxComplete(callback)

     type (String)  : (可选) 重回内容格式,xml, html, script, json, text, _default。

AJAX 央求实现时实践函数。Ajax 事件。

  示例

XMLHttpRequest 对象和安装作为参数字传送递给回调函数。

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx";
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); //返回text数据类型
 4 }
 5 function jqPostCallBack(oData) {
 6   //在div中显示所有数据
 7   $("#divResult").html(oData);
 8   $("#divResult").css("display", "block");
 9   $("#divResult").css("color", "red");
10 }

返回值  jQuery

 

参数

二、Ajax事件

callback (Function) : 待执行函数

  1、ajaxComplete(callback)

示例

    AJAX 乞求完毕时进行函数。Ajax 事件。

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); //返回text数据类型
  //AJAX 请求完成时执行函数
  $("#divResult").ajaxComplete(function(event, request, settings) {
    $(this).append("<br/>请求完成.");
  });
}
function jqPostCallBack(oData) {
  //在div中显示所有数据
  $("#divResult").html(oData);
  $("#divResult").css("display", "block");
  $("#divResult").css("color", "red");
}

    XMLHttpRequest 对象和设置作为参数字传送递给回调函数。

2、ajaxError(callback)

    返回值  jQuery

AJAX 须求发生错误时进行函数。Ajax 事件。

    参数

XMLHttpRequest 对象和设置作为参数字传送递给回调函数。捕捉到的不当可作为最后一个参数传递。

     callback (Function)  : 待试行函数

返回值  jQuery

    示例

参数

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx";
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); //返回text数据类型
 4   //AJAX 请求完成时执行函数
 5   $("#divResult").ajaxComplete(function(event, request, settings) {
 6     $(this).append("<br/>请求完成.");
 7   });
 8 }
 9 function jqPostCallBack(oData) {
10   //在div中显示所有数据
11   $("#divResult").html(oData);
12   $("#divResult").css("display", "block");
13   $("#divResult").css("color", "red");
14 }

callback (Function) : 待实施函数

  2、ajaxError(callback)

function (event, XMLHttpRequest, ajaxOptions, thrownError) {
   // thrownError 只有当异常发生时才会被传递
   this; // 监听的 dom 元素
}

    AJAX 必要产生错误时进行函数。Ajax 事件。

示例

    XMLHttpRequest 对象和设置作为参数字传送递给回调函数。捕捉到的错误可作为最后两个参数字传送递。

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandlers.ashx"; //正确的文件名 AjaxHandler.ashx 这里故意写错 引发ajaxError事件
  $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
}
//AJAX 请求发生错误时执行函数 (这一段放在jqAjaxTest函数内也可以)
$("#divResult").ajaxError(function(event, request, settings) {
  $("#divResult").css("display", "block");
  $("#divResult").css("color", "red");
  $(this).append("<br/>出错页面:" + settings.url);
});
function jqPostCallBack(oData) {
  //在div中显示所有数据
  $("#divResult").html(oData);
  $("#divResult").css("display", "block");
  $("#divResult").css("color", "red");
}

    返回值  jQuery

3、ajaxSend(callback)

    参数

AJAX 乞请发送前实行函数。Ajax 事件。

     callback (Function)  : 待实行函数

XMLHttpRequest 对象和设置作为参数字传送递给回调函数。

1 function (event, XMLHttpRequest, ajaxOptions, thrownError) {
2    // thrownError 只有当异常发生时才会被传递
3    this; // 监听的 dom 元素
4 }

返回值  jQuery

  示例

参数

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandlers.ashx"; //正确的文件名 AjaxHandler.ashx 这里故意写错 引发ajaxError事件
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
 4 }
 5 //AJAX 请求发生错误时执行函数 (这一段放在jqAjaxTest函数内也可以)
 6 $("#divResult").ajaxError(function(event, request, settings) {
 7   $("#divResult").css("display", "block");
 8   $("#divResult").css("color", "red");
 9   $(this).append("<br/>出错页面:" + settings.url);
10 });
11 function jqPostCallBack(oData) {
12   //在div中显示所有数据
13   $("#divResult").html(oData);
14   $("#divResult").css("display", "block");
15   $("#divResult").css("color", "red");
16 }

callback (Function) : 待实践函数

  3、ajaxSend(callback)

示例

  AJAX 央求发送前推行函数。Ajax 事件。

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
}
//AJAX 请求发送前执行函数
$("#divResult").ajaxSend(function(evt, request, settings) {
  $("#divResult").css("display", "block");
  $("#divResult").css("color", "red");
  $(this).append("<br/>开始请求: " + settings.url + "<br/>");
});
function jqPostCallBack(oData) {
  //在div中显示所有数据
  $("#divResult").append(oData);
  $("#divResult").css("display", "block");
  $("#divResult").css("color", "red");
}

  XMLHttpRequest 对象和装置作为参数传递给回调函数。

4、ajaxStart(callback)

  返回值  jQuery

AJAX 央浼开端时实行函数。Ajax 事件。

  参数

返回值  jQuery

  callback (Function) : 待施行函数

参数

  示例

callback (Function) : 待实施函数

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx"; 
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
 4 }
 5 //AJAX 请求发送前执行函数
 6 $("#divResult").ajaxSend(function(evt, request, settings) {
 7   $("#divResult").css("display", "block");
 8   $("#divResult").css("color", "red");
 9   $(this).append("<br/>开始请求: " + settings.url + "<br/>");
10 });
11 function jqPostCallBack(oData) {
12   //在div中显示所有数据
13   $("#divResult").append(oData);
14   $("#divResult").css("display", "block");
15   $("#divResult").css("color", "red");
16 }

示例

  4、ajaxStart(callback)

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
}
//AJAX 请求开始时执行函数
$("#divResult").ajaxStart(function() {
  $("#divResult").css("display", "block");
  $("#divResult").css("color", "red");
  $(this).append("<br/>请求开始了<br/>");
});
function jqPostCallBack(oData) {
  //在div中显示所有数据
  $("#divResult").append(oData);
  $("#divResult").css("display", "block");
  $("#divResult").css("color", "red");
}

  AJAX 央求开端时实行函数。Ajax 事件。

5、ajaxStop(callback)

  返回值  jQuery

AJAX 诉求甘休时实践函数。Ajax 事件。

  参数

返回值  jQuery

  callback (Function) : 待试行函数

参数

  示例

callback (Function) : 待推行函数

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx"; 
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
 4 }
 5 //AJAX 请求开始时执行函数
 6 $("#divResult").ajaxStart(function() {
 7   $("#divResult").css("display", "block");
 8   $("#divResult").css("color", "red");
 9   $(this).append("<br/>请求开始了<br/>");
10 });
11 function jqPostCallBack(oData) {
12   //在div中显示所有数据
13   $("#divResult").append(oData);
14   $("#divResult").css("display", "block");
15   $("#divResult").css("color", "red");
16 }

示例

  5、ajaxStop(callback)

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
}
//AJAX 请求开始时执行函数
$("#divResult").ajaxStop(function() {
  $(this).append("<br/>请求已经结束了<br/>");
});
function jqPostCallBack(oData) {
  //在div中显示所有数据
  $("#divResult").append(oData);
  $("#divResult").css("display", "block");
  $("#divResult").css("color", "red");
}

  AJAX 央浼结束时进行函数。Ajax 事件。

6、ajaxSuccess(callback)

  返回值  jQuery

AJAX 诉求成功时实行函数。Ajax 事件。

  参数

XMLHttpRequest 对象和设置作为参数字传送递给回调函数。

  callback (Function) : 待试行函数

返回值  jQuery

  示例

参数

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx"; 
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
 4 }
 5 //AJAX 请求开始时执行函数
 6 $("#divResult").ajaxStop(function() {
 7   $(this).append("<br/>请求已经结束了<br/>");
 8 });
 9 function jqPostCallBack(oData) {
10   //在div中显示所有数据
11   $("#divResult").append(oData);
12   $("#divResult").css("display", "block");
13   $("#divResult").css("color", "red");
14 }

callback (Function) : 待实行函数

  6、ajaxSuccess(callback)

示例

  AJAX 央浼成功时实践函数。Ajax 事件。

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
}
//AJAX 请求成功时执行函数
$("#divResult").ajaxSuccess(function(evt, request, settings) {
  $(this).append("<br/>请求成功<br/>");
  $(this).append(settings.url);
});
function jqPostCallBack(oData) {
  //在div中显示所有数据
  $("#divResult").append(oData);
  $("#divResult").css("display", "block");
  $("#divResult").css("color", "red");
}

  XMLHttpRequest 对象和安装作为参数字传送递给回调函数。

三、其他

  返回值  jQuery

1、jQuery.ajaxSetup(options)

  参数

设置全局 AJAX 暗中同意选项。

  callback (Function) : 待推行函数

参数见 '$.ajax' 说明。

  示例

返回值  jQuery

 1 function jqAjaxTest() {
 2   var jqRequestUrl = "AjaxHandler.ashx"; 
 3   $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");
 4 }
 5 //AJAX 请求成功时执行函数
 6 $("#divResult").ajaxSuccess(function(evt, request, settings) {
 7   $(this).append("<br/>请求成功<br/>");
 8   $(this).append(settings.url);
 9 });
10 function jqPostCallBack(oData) {
11   //在div中显示所有数据
12   $("#divResult").append(oData);
13   $("#divResult").css("display", "block");
14   $("#divResult").css("color", "red");
15 }

参数

三、其他

options (可选) : 选项设置。全部安装项均为可选设置。

  1、jQuery.ajaxSetup(options)

示例

  设置全局 AJAX 默许选项。

//设置 AJAX 请求默认地址为 "AjaxHandler.ashx",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。 
$.ajaxSetup({
  url: "AjaxHandler.ashx",
  global: false,
  type: "POST"
});

  参数见 '$.ajax' 说明。

2、serialize()

  返回值  jQuery

系列化表单内容为字符串。

  参数

返回值  jQuery

   options (可选) : 选项设置。全体安装项均为可选设置。 

参数

  示例

连串化表单内容为字符串,用于 Ajax 央浼。

1 //设置 AJAX 请求默认地址为 "AjaxHandler.ashx",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。 
2 $.ajaxSetup({
3   url: "AjaxHandler.ashx",
4   global: false,
5   type: "POST"
6 });

示例

  2、serialize()

$(document).ready(function() {
  var oSerializedStr = $("form").serialize(); //序列化表单内容为字符串
  $("#results").append("<tt>" + oSerializedStr + "</tt>");
});

  种类化表单内容为字符串。

文书档案片段:

  返回值  jQuery

<body>
  <p id="results">
    <b>Results: </b>
  </p>
  <form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br />
  <input type="checkbox" name="check" value="check1" />
  check1
  <input type="checkbox" name="check" value="check2" checked="checked" />
  check2
  <input type="radio" name="radio" value="radio1" checked="checked" />
  radio1
  <input type="radio" name="radio" value="radio2" />
  radio2
  </form>
  <script src="js/jQTest.js" type="text/javascript"></script>
</body>

  参数

3、serializeArray()

  连串化表单内容为字符串,用于 Ajax 央求。

体系化表单内容,再次来到 JSON 数据结构数据。

  示例

返回值  jQuery

1 $(document).ready(function() {
2   var oSerializedStr = $("form").serialize(); //序列化表单内容为字符串
3   $("#results").append("<tt>" + oSerializedStr + "</tt>");
4 });

参数

  文档片段

种类化表单内容为JSON ,用于 Ajax 央求。

 1 <body>
 2   <p id="results">
 3     <b>Results: </b>
 4   </p>
 5   <form>
 6   <select name="single">
 7     <option>Single</option>
 8     <option>Single2</option>
 9   </select>
10   <select name="multiple" multiple="multiple">
11     <option selected="selected">Multiple</option>
12     <option>Multiple2</option>
13     <option selected="selected">Multiple3</option>
14   </select><br />
15   <input type="checkbox" name="check" value="check1" />
16   check1
17   <input type="checkbox" name="check" value="check2" checked="checked" />
18   check2
19   <input type="radio" name="radio" value="radio1" checked="checked" />
20   radio1
21   <input type="radio" name="radio" value="radio2" />
22   radio2
23   </form>
24   <script src="js/jQTest.js" type="text/javascript"></script>
25 </body>

示例

  3、serializeArray()

$(document).ready(function() {
  var fields = $("select, :radio").serializeArray(); //序列化表单select和raido为json
  jQuery.each(fields, function(i, field) {
    $("#results").append(field.value + " ");
  }); 
});

  体系化表单内容,重回 JSON 数据结构数据。

好了,关于jQuery的ajax就介绍到此地,笔者的每个示例都测量检验通过了。jQuery封装好的ajax函数用起来实在有助于,有了那样的“神兵利器”,以往写ajax的应用程序显明会尤其百发百中。

  返回值  jQuery

指望本文所述对我们jQuery程序设计有所扶助。

  参数

您或者感兴趣的篇章:

  • 争论jQuery Ajax用法详解
  • 双层ajax嵌套(可多层)用法实例
  • Jquery中$.post和$.ajax的用法小结
  • jQuery中ajax的post()方法用法实例
  • jQuery中ajax的get()方法用法实例
  • jQuery中ajax的load()方法用法实例
  • jQuery+ajax中getJSON() 用法实例
  • Ajax的用法计算

  系列化表单内容为JSON ,用于 Ajax 央浼。

  示例

1 $(document).ready(function() {
2   var fields = $("select, :radio").serializeArray(); //序列化表单select和raido为json
3   jQuery.each(fields, function(i, field) {
4     $("#results").append(field.value + " ");
5   }); 
6 });

jQuery封装好的ajax函数用起来的确方便,有了那样的“神兵利器”,今后写ajax的应用程序确定会更加的贯虱穿杨。

本文由王中王开奖结果发布于网络应用,转载请注明出处:jQuery学习笔记之Ajax用法详解,jQuery学习笔记之

关键词: