Penjelasan terperinci tentang contoh penggunaan Ajax dalam nota kajian jQuery

Contoh dalam artikel ini menerangkan penggunaan Ajax bagi nota kajian jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

1. Permintaan Ajax

1.jQuery.ajax(pilihan)

Muat data jauh melalui permintaan HTTP. jQuery yang mendasari pelaksanaan AJAX. Untuk pelaksanaan peringkat tinggi yang ringkas dan mudah digunakan, lihat .get, .post, dsb.

.ajax() mengembalikan objek XMLHttpRequest yang diciptanya. Dalam kebanyakan kes, anda tidak perlu memanipulasi objek ini secara langsung, tetapi dalam kes khas ia boleh digunakan untuk menamatkan permintaan secara manual. .ajax() hanya mempunyai satu parameter: parameter kunci/objek nilai, termasuk setiap konfigurasi dan maklumat fungsi panggil balik. Lihat pilihan parameter terperinci di bawah.

Nota: Jika anda menentukan pilihan dataType, sila pastikan pelayan mengembalikan maklumat MIME yang betul (cth. xml mengembalikan "teks/xml"). Jenis MIME yang salah boleh menyebabkan ralat yang tidak dapat diramalkan.

Nota: Jika dataType ditetapkan kepada "skrip", maka semasa permintaan jauh (bukan di bawah domain yang sama), semua permintaan POST akan ditukar kepada permintaan GET. (Kerana teg skrip DOM akan digunakan untuk memuatkan)

Dalam jQuery 1.2, anda boleh memuatkan data JSON merentas domain Apabila menggunakannya, anda perlu menetapkan jenis data kepada JSONP. Apabila memanggil fungsi menggunakan format JSONP, seperti "myurl?callback=?"jQuery akan secara automatik menggantikan ? Apabila jenis data ditetapkan kepada "jsonp", jQuery akan memanggil fungsi panggil balik secara automatik.

Nilai pulangan XMLHttpRequest

Parameter

pilihan (pilihan): tetapan permintaan AJAX. Semua pilihan adalah pilihan.
Pilihan

(1), tak segerak (Boolean): (Lalai: benar)
Secara lalai, semua permintaan adalah tak segerak. Jika anda perlu menghantar permintaan segerak, tetapkan pilihan ini kepada palsu. Ambil perhatian bahawa permintaan segerak akan mengunci penyemak imbas, dan pengguna mesti menunggu permintaan itu selesai sebelum operasi lain boleh dilakukan.

(2) beforeSend (Function): Fungsi yang boleh mengubah suai objek XMLHttpRequest sebelum menghantar permintaan, seperti menambah pengepala HTTP tersuai.
Objek XMLHttpRequest ialah satu-satunya parameter. Ini adalah acara Ajax. Jika palsu dikembalikan, permintaan ajax ini boleh dibatalkan.

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

Salin selepas log masuk

(3), cache (Boolean): (lalai: benar, lalai adalah palsu apabila dataType ialah skrip)
Baru dalam jQuery 1.2, tetapan kepada false tidak akan memuatkan maklumat permintaan daripada cache penyemak imbas.

(4), lengkap (Fungsi): fungsi panggil balik selepas permintaan selesai (dipanggil apabila permintaan berjaya atau gagal).
Parameter: objek XMLHttpRequest dan rentetan yang menerangkan jenis permintaan yang berjaya. Ini ialah acara Ajax

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

Salin selepas log masuk

(5), contentType (String): (Lalai: "application/x-www-form-urlencoded") Jenis pengekodan kandungan semasa menghantar maklumat ke pelayan. Nilai lalai sesuai untuk kebanyakan aplikasi.

(6), data (Objek, Rentetan): Data dihantar ke pelayan. Akan ditukar secara automatik kepada format rentetan permintaan. Dilampirkan pada URL dalam permintaan GET. Lihat perihalan pilihan processData untuk melumpuhkan penukaran automatik ini.
Mesti dalam format Kunci/Nilai. Jika ia adalah tatasusunan, jQuery secara automatik akan memberikan nama yang sama kepada nilai yang berbeza. Contohnya, {foo:["bar1", "bar2"]} ditukar kepada '&foo=bar1&foo=bar2'.

(7), dataFilter (Fungsi): Fungsi untuk pramemproses data asal yang dikembalikan oleh Ajax. Sediakan dua parameter, data dan jenis: data ialah data asal yang dikembalikan oleh Ajax, dan taip ialah parameter dataType yang disediakan semasa memanggil jQuery.ajax. Nilai yang dikembalikan oleh fungsi akan diproses selanjutnya oleh jQuery.

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

Salin selepas log masuk

(8), dataType (String): (Nilai lalai: pertimbangan pintar xml atau html)
Jenis data yang dijangka akan dikembalikan oleh pelayan. Jika tidak dinyatakan, jQuery akan secara automatik mengembalikan responseXML atau responseText berdasarkan maklumat MIME paket HTTP dan menghantarnya sebagai parameter fungsi panggil balik Nilai yang tersedia:

"xml": Mengembalikan dokumen XML yang boleh diproses dengan jQuery.
"html": Mengembalikan maklumat HTML teks biasa, teg skrip yang disertakan akan dilaksanakan apabila dimasukkan ke dalam dom.
"skrip": Mengembalikan kod JavaScript teks biasa. Keputusan tidak dicache secara automatik. Melainkan parameter "cache" ditetapkan. Nota: Apabila membuat permintaan jauh (bukan di bawah domain yang sama), semua permintaan POST akan ditukar kepada permintaan GET. (Kerana teg skrip DOM akan digunakan untuk memuatkan)
"json": Mengembalikan data JSON.
"jsonp": format JSONP. Apabila memanggil fungsi menggunakan format JSONP, seperti "myurl?callback=?"jQuery akan secara automatik menggantikan ?
"teks": Mengembalikan rentetan teks biasa

(9), ralat (Fungsi): (Lalai: pertimbangan automatik (xml atau html)) Masa untuk membuat panggilan apabila permintaan gagal. Terdapat tiga parameter: objek XMLHttpRequest, mesej ralat dan objek ralat yang ditangkap (pilihan). Jika ralat berlaku, mesej ralat (parameter kedua) mungkin "tamat masa", "ralat", "tidak diubahsuai" dan "parsererror" sebagai tambahan kepada null. Acara Ajax.

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

几个相关文件：

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

xml文件：

jeffWong.xml：

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

2、ajaxError(callback)

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

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

返回值 jQuery

参数

callback (Function) : 待执行函数

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

Salin selepas log masuk

示例

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

三、其他

1、jQuery.ajaxSetup(options)

设置全局 AJAX 默认选项。

参数见 '$.ajax' 说明。

返回值 jQuery

参数

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

示例

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

Salin selepas log masuk

2、serialize()

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

返回值 jQuery

参数

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

示例

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

Salin selepas log masuk

文档片段：

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

Salin selepas log masuk

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

Salin selepas log masuk

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.

Penjelasan terperinci tentang contoh penggunaan Ajax dalam nota kajian jQuery_jquery