Explication détaillée des exemples d'utilisation d'Ajax dans l'étude jQuery notes

L'exemple de cet article décrit l'utilisation Ajax des notes d'étude jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Demande Ajax

1.jQuery.ajax(options)

Chargez les données distantes via une requête HTTP. jQuery sous-jacent à l’implémentation d’AJAX. Pour des implémentations de haut niveau simples et faciles à utiliser, voir .get, .post, etc.

.ajax() renvoie l'objet XMLHttpRequest qu'il a créé. Dans la plupart des cas, vous n'aurez pas besoin de manipuler cet objet directement, mais dans des cas particuliers, il peut être utilisé pour terminer manuellement la requête. .ajax() n'a qu'un seul paramètre : le paramètre clé/valeur de l'objet, comprenant chaque information de configuration et de fonction de rappel. Voir les options de paramètres détaillées ci-dessous.

Remarque : Si vous spécifiez l'option dataType, veuillez vous assurer que le serveur renvoie les informations MIME correctes (par exemple, xml renvoie "text/xml"). Des types MIME incorrects peuvent provoquer des erreurs imprévisibles.

Remarque : Si dataType est défini sur "script", alors lors des requêtes distantes (pas sous le même domaine), toutes les requêtes POST seront converties en requêtes GET. (Car la balise du script DOM sera utilisée pour le chargement)

Dans jQuery 1.2, vous pouvez charger des données JSON sur plusieurs domaines. Lorsque vous l'utilisez, vous devez définir le type de données sur JSONP. Lors de l'appel d'une fonction au format JSONP, telle que "myurl?callback=?", jQuery remplacera automatiquement ? par le nom de fonction correct pour exécuter la fonction de rappel. Lorsque le type de données est défini sur "jsonp", jQuery appellera automatiquement la fonction de rappel.

Valeur de retour XMLHttpRequest

Paramètres

options (facultatif) : paramètres de requête AJAX. Toutes les options sont facultatives.
Options

(1), asynchrone (booléen) : (par défaut : vrai)
Par défaut, toutes les requêtes sont asynchrones. Si vous devez envoyer des requêtes synchrones, définissez cette option sur false. Notez qu'une requête synchrone verrouillera le navigateur et que l'utilisateur devra attendre que la requête soit terminée avant de pouvoir effectuer d'autres opérations.

(2) beforeSend (Function) : Une fonction qui peut modifier l'objet XMLHttpRequest avant d'envoyer la requête, comme l'ajout d'un en-tête HTTP personnalisé.
L'objet XMLHttpRequest est le seul paramètre. C'est un événement de l'Ajax. Si false est renvoyé, cette requête ajax peut être annulée.

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

Copier après la connexion

(3), cache (booléen) : (par défaut : vrai, la valeur par défaut est fausse lorsque dataType est script)
Nouveau dans jQuery 1.2, la définition sur false ne chargera pas les informations de demande à partir du cache du navigateur.

(4), complete (Function) : fonction de rappel une fois la requête terminée (appelée lorsque la requête réussit ou échoue).
Paramètres : objet XMLHttpRequest et une chaîne décrivant le type de requête réussie. C'est un événement Ajax

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

Copier après la connexion

(5), contentType (String) : (Par défaut : "application/x-www-form-urlencoded") Type d'encodage du contenu lors de l'envoi d'informations au serveur. La valeur par défaut convient à la plupart des applications.

(6), data (Object,String) : Données envoyées au serveur. Sera automatiquement converti au format de chaîne de demande. Ajouté à l'URL dans les requêtes GET. Consultez la description de l’option processData pour désactiver cette conversion automatique.
Doit être au format Clé/Valeur. S'il s'agit d'un tableau, jQuery attribuera automatiquement le même nom à différentes valeurs. Par exemple, {foo:["bar1", "bar2"]} est converti en '&foo=bar1&foo=bar2'.

(7), dataFilter (Fonction) : Une fonction de prétraitement des données originales renvoyées par Ajax. Fournissez deux paramètres, data et type : data sont les données d'origine renvoyées par Ajax et type est le paramètre dataType fourni lors de l'appel de jQuery.ajax. La valeur renvoyée par la fonction sera ensuite traitée par jQuery.

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

Copier après la connexion

(8), dataType (String) : (Valeur par défaut : jugement intelligent de XML ou HTML)
Le type de données qui devrait être renvoyé par le serveur. S'il n'est pas spécifié, jQuery renverra automatiquement ResponseXML ou ResponseText en fonction des informations MIME du paquet HTTP et les transmettra comme paramètre de fonction de rappel. Valeurs disponibles :

"xml" : renvoie un document XML pouvant être traité avec jQuery.
"html" : renvoie des informations HTML en texte brut ; la balise de script incluse sera exécutée une fois insérée dans le dom.
"script" : renvoie le code JavaScript en texte brut. Les résultats ne sont pas automatiquement mis en cache. Sauf si le paramètre "cache" est défini. Remarque : lors de requêtes distantes (pas sous le même domaine), toutes les requêtes POST seront converties en requêtes GET. (Car la balise du script DOM sera utilisée pour le chargement)
"json" : renvoie les données JSON.
"jsonp" : format JSONP. Lors de l'appel d'une fonction au format JSONP, telle que "myurl?callback=?", jQuery remplacera automatiquement ? par le nom de fonction correct pour exécuter la fonction de rappel.
"text": renvoie une chaîne de texte brut

(9), erreur (Fonction) : (Par défaut : jugement automatique (xml ou html)) L'heure d'appel lorsque la requête échoue. Il existe trois paramètres : l'objet XMLHttpRequest, le message d'erreur et (facultatif) l'objet d'erreur capturé. Si une erreur se produit, le message d'erreur (le deuxième paramètre) peut être "timeout", "error", "notmodified" et "parsererror" en plus de null. Événements d'Ajax.

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

Copier après la connexion

（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参数
}

Copier après la connexion

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

Copier après la connexion

几个相关文件：

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

xml文件：

jeffWong.xml：

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

二、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");
}

Copier après la connexion

2、ajaxError(callback)

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

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

返回值 jQuery

参数

callback (Function) : 待执行函数

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

Copier après la connexion

示例

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

三、其他

1、jQuery.ajaxSetup(options)

设置全局 AJAX 默认选项。

参数见 '$.ajax' 说明。

返回值 jQuery

参数

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

示例

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

Copier après la connexion

2、serialize()

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

返回值 jQuery

参数

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

示例

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

Copier après la connexion

文档片段：

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

Copier après la connexion

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

Copier après la connexion

D'accord, c'est tout pour l'introduction à l'ajax de jQuery. Chacun des exemples de l'auteur a réussi le test. La fonction ajax encapsulée par jQuery est vraiment pratique à utiliser Avec une telle "arme magique", écrire des applications ajax sera certainement plus facile à l'avenir.

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Explication détaillée des exemples d'utilisation d'Ajax dans l'étude jQuery notes_jquery