Detailed explanation of Ajax usage examples in jQuery study notes

The example in this article describes the Ajax usage of jQuery study notes. Share it with everyone for your reference, the details are as follows:

1. Ajax request

1.jQuery.ajax(options)

Load remote data via HTTP request. jQuery underlying AJAX implementation. For simple and easy-to-use high-level implementations, see .get, .post, etc.

.ajax() returns the XMLHttpRequest object it created. In most cases you will not need to manipulate this object directly, but in special cases it can be used to manually terminate the request. .ajax() has only one parameter: parameter key/value object, including each configuration and callback function information. See detailed parameter options below.

Note: If you specify the dataType option, please ensure that the server returns the correct MIME information (e.g. xml returns "text/xml"). Incorrect MIME types can cause unpredictable errors.

Note: If dataType is set to "script", then during remote requests (not under the same domain), all POST requests will be converted to GET requests. (Because the DOM script tag will be used to load)

In jQuery 1.2, you can load JSON data across domains. When using it, you need to set the data type to JSONP. When calling a function using JSONP form, such as "myurl?callback=?" jQuery will automatically replace ? with the correct function name to execute the callback function. When the data type is set to "jsonp", jQuery will automatically call the callback function.

Return value XMLHttpRequest

Parameters

options (optional): AJAX request settings. All options are optional.
Options

(1), async (Boolean): (Default: true)
By default, all requests are asynchronous. If you need to send synchronous requests, set this option to false. Note that a synchronous request will lock the browser, and the user must wait for the request to complete before other operations can be performed.

(2) beforeSend (Function): A function that can modify the XMLHttpRequest object before sending the request, such as adding a custom HTTP header.
The XMLHttpRequest object is the only parameter. This is an Ajax event. If false is returned, this ajax request can be canceled.

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

Copy after login

(3), cache (Boolean): (default: true, default is false when dataType is script)
New in jQuery 1.2, setting to false will not load request information from the browser cache.

(4), complete (Function): callback function after the request is completed (called when the request succeeds or fails).
Parameters: XMLHttpRequest object and a string describing the type of successful request. This is an Ajax event

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

Copy after login

(5), contentType (String): (Default: "application/x-www-form-urlencoded") Content encoding type when sending information to the server. The default value is suitable for most applications.

(6), data (Object,String): Data sent to the server. Will be automatically converted to request string format. Appended to the URL in GET requests. See the processData option description to disable this automatic conversion.
Must be in Key/Value format. If it is an array, jQuery will automatically assign the same name to different values. For example, {foo:["bar1", "bar2"]} is converted to '&foo=bar1&foo=bar2'.

(7), dataFilter (Function): A function for preprocessing the original data returned by Ajax. Provide two parameters, data and type: data is the original data returned by Ajax, and type is the dataType parameter provided when calling jQuery.ajax. The value returned by the function will be further processed by jQuery.

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

Copy after login

(8), dataType (String): (Default value: intelligent judgment of xml or html)
The data type expected to be returned by the server. If not specified, jQuery will automatically return responseXML or responseText based on the HTTP packet MIME information and pass it as a callback function parameter. Available values:

"xml": Returns an XML document that can be processed with jQuery.
"html": Returns plain text HTML information; the included script tag will be executed when inserted into the dom.
"script": Returns plain text JavaScript code. Results are not cached automatically. Unless the "cache" parameter is set. Note: When making remote requests (not under the same domain), all POST requests will be converted into GET requests. (Because the DOM script tag will be used to load)
"json": Returns JSON data.
"jsonp": JSONP format. When calling a function using JSONP format, such as "myurl?callback=?" jQuery will automatically replace ? with the correct function name to execute the callback function.
"text": Returns a plain text string

(9), error (Function): (Default: automatic judgment (xml or html)) The time to call when the request fails. There are three parameters: XMLHttpRequest object, error message, and (optional) captured error object. If an error occurs, the error message (the second parameter) may be "timeout", "error", "notmodified" and "parsererror" in addition to null. Ajax events.

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

Copy after login

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

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

（12）、jsonp (String) : 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

（13）、password (String) : 用于响应HTTP访问认证请求的密码

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

（15）、scriptCharset (String) : 只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。

（16）、success (Function) : 请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。 Ajax 事件。

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

Copy after login

（17）、timeout (Number) : 设置请求超时时间（毫秒）。此设置将覆盖全局设置。

（18）、type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

（19）、url (String) : (默认: 当前页地址) 发送请求的地址。

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

（21）、xhr (Function) : 需要返回一个XMLHttpRequest 对象。默认在IE下是ActiveXObject 而其他情况下是XMLHttpRequest 。用于重写或者提供一个增强的XMLHttpRequest 对象。这个参数在jQuery 1.3以前不可用。

ps:上述红色标出的部分是大多数ajax调用常用的参数设置，利用这几个参数就可以成功实现ajax调用了.

示例

//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 + "&#63;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 + "&#63;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 + "&#63;action=syncRequest",
    async: false
  }).responseText;
  alert(html);
  //6、显式get测试
  $.ajax({
    type: "GET",
    url: jqRequestUrl + "&#63;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);
    }
  });
}

Copy after login

几个相关文件：

a、处理ajax请求的服务端文件：AjaxHandler.ashx，对应的cs文件：

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;
      }
    }
  }
}

Copy after login

b、aspx，html和xml文件（直接放在根目录下）

aspx文件是ajax请求页面：

<%@ 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>
      <span style="display: none" id="spanGetHtml"></span>
    <br />
    Please input a name:<input id="txtUserName" type="text" /><input id="btnJQAjax" type="button"
      value="jQuery ajax 请求" onclick="jqAjaxTest()" />
      <span style="display: none" id="spanResult"></span>
  </div>
  <script src="js/jQTest.js" type="text/javascript"></script>
  </form>
</body>
</html>

Copy after login

html很简单：

test.htm：

<!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>

Copy after login

xml文件：

jeffWong.xml：

<&#63;xml version="1.0" encoding="utf-8" &#63;>
<profile>
 <userName>jeff wong</userName>
 <location>beijing</location>
</profile>

Copy after login

c、js文件（放在根目录js文件夹下）

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

复制代码代码如下:

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

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

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

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。

返回值 jQuery

参数

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

示例：

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

Copy after login

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

通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 .ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用.ajax。

返回值 XMLHttpRequest

参数

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

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  $.get(jqRequestUrl + "&#63;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");
}

Copy after login

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);
    }
  }
}

Copy after login

ps：本例中，我们返回的是一段json类型的数据，在客户端没有对json类型数据进行处理，在下一个方法（jQuery.getJSON）中会改进处理的。

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

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

在 jQuery 1.2 中，您可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
注意：此行以后的代码将在这个回调函数执行前执行。

返回值 XMLHttpRequest

参数

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

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  //getJSON方法调用
  $.getJSON(jqRequestUrl + "&#63;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");
}

Copy after login

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

通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

返回值 XMLHttpRequest

参数

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

示例

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

Copy after login

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

通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂 .ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用.ajax。

返回值 XMLHttpRequest

参数

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

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  $.post(jqRequestUrl + "&#63;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");
}

Copy after login

二、Ajax事件

1、ajaxComplete(callback)

AJAX 请求完成时执行函数。Ajax 事件。

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

返回值 jQuery

参数

callback (Function) : 待执行函数

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  $.post(jqRequestUrl + "&#63;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");
}

Copy after login

2、ajaxError(callback)

AJAX 请求发生错误时执行函数。Ajax 事件。

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

返回值 jQuery

参数

callback (Function) : 待执行函数

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

Copy after login

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandlers.ashx"; //正确的文件名 AjaxHandler.ashx 这里故意写错 引发ajaxError事件
  $.post(jqRequestUrl + "&#63;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");
}

Copy after login

3、ajaxSend(callback)

AJAX 请求发送前执行函数。Ajax 事件。

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

返回值 jQuery

参数

callback (Function) : 待执行函数

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "&#63;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");
}

Copy after login

4、ajaxStart(callback)

AJAX 请求开始时执行函数。Ajax 事件。

返回值 jQuery

参数

callback (Function) : 待执行函数

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "&#63;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");
}

Copy after login

5、ajaxStop(callback)

AJAX 请求结束时执行函数。Ajax 事件。

返回值 jQuery

参数

callback (Function) : 待执行函数

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "&#63;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");
}

Copy after login

6、ajaxSuccess(callback)

AJAX 请求成功时执行函数。Ajax 事件。

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

返回值 jQuery

参数

callback (Function) : 待执行函数

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "&#63;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");
}

Copy after login

三、其他

1、jQuery.ajaxSetup(options)

设置全局 AJAX 默认选项。

参数见 '$.ajax' 说明。

返回值 jQuery

参数

options (可选) : 选项设置。所有设置项均为可选设置。

示例

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

Copy after login

2、serialize()

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

返回值 jQuery

参数

序列化表单内容为字符串，用于 Ajax 请求。

示例

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

Copy after login

文档片段：

<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>

Copy after login

3、serializeArray()

序列化表单内容，返回 JSON 数据结构数据。

返回值 jQuery

参数

序列化表单内容为JSON ，用于 Ajax 请求。

示例

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

Copy after login

Okay, that’s it for the introduction to jQuery’s ajax. Each of the author’s examples has passed the test. The ajax function encapsulated by jQuery is really convenient to use. With such a "magic weapon", writing ajax applications will definitely be easier in the future.

I hope this article will be helpful to everyone in jQuery programming.

Detailed explanation of Ajax usage examples in jQuery study notes_jquery