jQuery系列：Ajax

libingql發表於2015-05-20
jQuery

1. load(url, [data], [callback])

1.1 解析

　　載入遠端 HTML 檔案程式碼並插入至 DOM 中。

　　語法格式：

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

其中，引數

　　url：請求被載入的頁面URL地址。

　　[data]：可選項引數，傳送至伺服器的資料，key/value格式。

　　[callback]：可選項引數，載入成功後返回至載入頁面的回撥函式。

load()方法預設使用 GET 方式，如果有[data]引數，則會自動轉換為POST方式。

1.2 示例

　　示例1：load()方法載入全部請求頁面HTML程式碼

　　Index.cshtml：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.4.js")"></script>
    <script type="text/javascript">
        $(function () {
            $("#container").load("@Url.Action("About", "Home")");
        });
    </script>
</head>
<body>
    <div id="container">
    </div>
</body>
</html>

　　About.cshtml：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>About</title>
</head>
<body>
    <div>
        Index
    </div>
    <div id="about">
        About
    </div>
</body>
</html>
View Code

　　load()方法之後，container中的HTML程式碼：

<div id="container">
    <meta name="viewport" content="width=device-width">
    <title>About</title>
    <div>
        Index
    </div>
    <div id="about">
        About
    </div>
</div>

　　載入靜態的HTML檔案：

<script type="text/javascript">
    $(function () {
        $("#container").load("About.html");
    });
</script>

　　示例2：load()方法載入部分請求頁面HTML程式碼

<script type="text/javascript">
    $(function () {
        $("#container").load("@Url.Action("About", "Home") div");
    });
</script>
<div id="container">
    <div>
        Index
    </div>
    <div id="about">
        About
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#container").load("@Url.Action("About", "Home") #about");
    });
</script>
<div id="container">
    <div id="about">
        About
    </div>
</div>

　　載入靜態的HTML檔案部分程式碼：

<script type="text/javascript">
    $(function () {
        $("#container").load("About.html #about");
    });
</script>

　　示例3：data可選項引數

<script type="text/javascript">
    $(function () {
        $("#container").load("@Url.Action("About", "Home")", {
            _t: new Date(),      // 日期
            _r: Math.random()    // 隨機數
        });
    });
</script>

　　示例4： callback可選項引數

<script type="text/javascript">
    $(function () {
        $("#container").load("@Url.Action("About", "Home")", {
            _t: new Date(),      // 日期
            _r: Math.random()    // 隨機數
        }, function (data) {
            alert(data);         // data為url頁面返回的結果
        });
    });
</script>

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

2.1 解析

　　通過遠端 HTTP GET 請求載入資訊。

　　語法格式：

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

其中，引數

　　url：請求被載入的頁面URL地址。

　　[data]：可選項引數，傳送至伺服器的資料，key/value格式。

　　[callback]：可選項引數，載入成功後返回至載入頁面的回撥函式。

　　[type]：返回的內容格式，xml, html, script, json, text, _default，預設為html。

2.2 示例

<script type="text/javascript">
    $(function () {
        $.get("@Url.Action("About", "Home")");
    });
</script>
<script type="text/javascript">
    $(function () {
        $.get("@Url.Action("About", "Home")", {
            _t: new Date(),      // 日期
            _r: Math.random()    // 隨機數
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        $.get("@Url.Action("About", "Home")", {
            UserName: encodeURI($("#txtUserName").val())
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        $.get("@Url.Action("About", "Home")", {
            _t: new Date(),      // 日期
            _r: Math.random()    // 隨機數
        }, function (data) {
            alert(data);         // data為url頁面返回的結果
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        $.get("@Url.Action("About", "Home")", {
            _t: new Date(),      // 日期
            _r: Math.random()    // 隨機數
        }, function (data) {
            alert(data);         // data為url頁面返回的結果
        }, "json");
    });
</script>

　　引數[data]可以使用另外一種方式傳遞：

<script type="text/javascript">
    $(function () {
        $.get("@Url.Action("About", "Home")",
            "_r=" + Math.random()
            , function (data) {
                alert(data._r);
            }, "json");
    });
</script>
<script type="text/javascript">
    $(function () {
        $.get("@Url.Action("About", "Home")",
            "_t=" + new Date() + "&_r=" + Math.random()
            , function (data) {
                alert(data._r);
            }, "json");
    });
</script>

　　jQuery非同步載入XML文件：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.4.js")"></script>
    <script type="text/javascript">
        $(function () {
            $.get("@Url.Content("~/Content/Categories.xml")", {
                _r: Math.random()
            }, function (data) {
                var categories = "";
                $(data).find("Category").each(function () {
                    // 遍歷獲取的資料
                    var $category = $(this);
                    categories += "分類ID：" + $category.find("CategoryID").text() + "<br />";
                    categories += "分類名稱：" + $category.find("CategoryName").text() + "<hr />";
                });
                // 顯示資料
                $("#container").html(categories);
            }, "xml");
        });
    </script>
</head>
<body>
    <div id="container">
    </div>
</body>
</html>

　　Categories.xml：

<?xml version="1.0" encoding="utf-8" ?>
<Categories>
  <Category>
    <CategoryID>1</CategoryID>
    <CategoryName>書籍</CategoryName>
  </Category>
  <Category>
    <CategoryID>2</CategoryID>
    <CategoryName>數碼電子</CategoryName>
  </Category>
  <Category>
    <CategoryID>3</CategoryID>
    <CategoryName>服裝服飾</CategoryName>
  </Category>
</Categories>
View Code

3. jQuery.getJSON(url, [data], [callback])

3.1 解析

　　通過 HTTP GET 請求載入 JSON 資料。

　　語法格式：

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

其中，引數

　　url：請求被載入的頁面URL地址。

　　[data]：可選項引數，傳送至伺服器的資料，key/value格式。

　　[callback]：可選項引數，載入成功後返回至載入頁面的回撥函式。

3.2 示例

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.4.js")"></script>
    <script type="text/javascript">
        $(function () {
            $.getJSON("/Home/Categories", {
                _r: Math.random()
            }, function (data) {
                //alert(data.length);
                var categories = "";
                $.each(data, function (i, item) {
                    categories += "分類ID：" + item.CategoryID + "<br />";
                    categories += "分類名稱：" + item.CategoryName + "<hr />";
                });
                // 顯示資料
                $("#container").html(categories);
            });
        });
    </script>
</head>
<body>
    <div id="container">
    </div>
</body>
</html>
public JsonResult Categories()
{
    List<Category> categories = new List<Category>() {
        new Category() { CategoryID = 1, CategoryName = "書籍" },
        new Category() { CategoryID = 2, CategoryName = "數碼電子" },
        new Category() { CategoryID = 3, CategoryName = "服裝服飾" }
    };
    return Json(categories, JsonRequestBehavior.AllowGet);
}
[{"CategoryID":1,"CategoryName":"書籍"},{"CategoryID":2,"CategoryName":"數碼電子"},{"CategoryID":3,"CategoryName":"服裝服飾"}]

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

4.1 解析

　　通過遠端 HTTP POST 請求載入資訊。

　　語法格式：

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

其中，引數

　　url：請求被載入的頁面URL地址。

　　[data]：可選項引數，傳送至伺服器的資料，key/value格式。

　　[callback]：可選項引數，載入成功後返回至載入頁面的回撥函式。

　　[type]：返回的內容格式，xml, html, script, json, text, _default，預設為html。

4.2 示例

　　jQuery.post(url, [data], [callback], [type])的用法與jQuery.get(url, [data], [callback], [type])相同。

<script type="text/javascript">
    $(function () {
        $.post("@Url.Action("About", "Home")", {
            _t: new Date(),      // 日期
            _r: Math.random()    // 隨機數
        });
    });
</script>

5. jQuery.ajax([options])

5.1 解析

　　通過 HTTP 請求載入遠端資料。

　　$.ajax()是jQuery Ajax的最底層方法，也是功能最強的方法。$.get()、$.post()、$.getJSON()等都是在$.ajax()方法基礎之上實現的。

　　語法格式：

jQuery.ajax([options])

其中，引數

　　[options]：$.ajax()方法中的請求設定，key/value格式。既包含傳送請求的引數，也包含伺服器響應後回撥的資料。

　　$.ajax()方法的引數列表：

引數名型別描述
url String 傳送請求的地址（預設為當前頁面）
type String 資料請求方式（get/post），預設為get。
data String或Object 傳送到伺服器端的資料。將自動轉換為請求字串格式。在GET 請求方式中將附加在 URL 後。
dataType String 伺服器返回的資料型別。如果未指定，jQuery自動根據HTTP包MIME資訊返回 responseXML 或 responseText，作為引數傳遞給回撥函式，可用型別：
html：返回純文字的HTML資訊，包含的 <Script>會在插入頁面時被執行
script：返回純文字的JavaScript程式碼
text：返回純文字字串
xml：返回可被jQuery處理的XML文件
json：返回JSON格式的資料
beforeSend Function

用於傳送請求前修改XMLHttpRequest物件，其中的引數就是XMLHttpRequest物件，由於該函式本身是jQuery事件，如果函式返回false，則表示取消本次事件。
XMLHttpRequest 物件是唯一的引數。

function (XMLHttpRequest) {
　　this; // the options for this ajax request
}

complete Function

請求完成後呼叫的函式，該函式無論資料傳送成功或失敗都會呼叫，其中有兩個引數：XMLHttpRequest物件和textStatus用於描述成功請求型別的字串。

function (XMLHttpRequest, textStatus)  {
　　 this; // the options for this ajax request
}

success Function

請求成功後呼叫的回撥函式，該函式有兩個引數：根據引數dataType處理後伺服器返回的資料data和textStatus描述狀態的字串。

function (data, textStatus) {
　　 this; // the options for this ajax request
}

error Function

請求失敗後呼叫的回撥函式，該函式有3個引數：XMLHttpRequest物件、出錯資訊和（可選）捕捉到的錯誤物件。

function (XMLHttpRequest, textStatus, errorThrown) {
       this; // 通常情況下textStatus和errorThown只有其中一個有值
}
timeout Number 請求超時的時間（毫秒），可以在$.ajaxSetup()方法中設定。
global Boolean 是否響應全域性事件，預設為true，表示為響應。如果設定為false，則不響應全域性事件，全域性事件$.ajaxStart()等將不響應。
async Boolean 是否非同步請求，預設為true，表示是非同步，如果設定為false，表示同步請求。
cache Boolean 是否進行頁面快取，true表示進行快取，false表示不進行快取。

5.2 示例

<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "GET",
            url: "/Home/CheckUserName",
            dataType: "html",
            data: "UserName=" + decodeURI($("#txtUserName").val()),
            beforeSend: function (XMLHttpRequest) {
                // show loading
            },
            success: function (data, textStatus) {

            },
            complete: function (XMLHttpRequest, textStatus) {
                // hide loading
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // XMLHttpRequest.status
                // XMLHttpRequest.readyState
                // textStatus
            }
        });
    });
</script>

6. serialize()、serializeArray()及Param()

6.1 解析

　　serialize()序列化表單，只能對<form>標記中的帶有name屬性的元素序列化。

　　serialize()語法格式：

serialize()

　　該方法是將所選擇的DOM元素轉換成能隨AJAX傳遞的字串，即序列化所選擇的DOM元素。

　　serialize()後的資料格式：

UserName=Libing&Password=1

　　serializeArray()序列化表格元素 (類似 serialize() 方法)，返回 JSON 資料結構資料，注意：此方法返回的是 JSON 物件而非 JSON 字串。serializeArray() 方法通過序列化表單值來建立物件陣列（名稱和值）。

　　返回的 JSON 物件是由一個物件陣列組成的，其中每個物件包含一個或兩個名值對 —— name 引數和 value 引數

[
    { name: "UserName", value: "使用者名稱" },
    { name: "Password", value: "密碼" },
    { name: "Email" } // 值為空
]

　　serializeArray()語法格式：

serializeArray()

　　param() 方法：序列化一個 key/value 物件。

　　param() 方法建立陣列或物件的序列化表示，該序列化值可在進行 AJAX 請求時在 URL 查詢字串中使用。

　　param() 方法用於在內部將元素值轉換為序列化的字串表示。

　　param()語法格式：

jQuery.param(object,traditional)

其中，引數

　　object：要進行序列化的陣列或物件。

　　traditional：規定是否使用傳統的方式淺層進行序列化（引數序列化）。

6.2 示例

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="~/Scripts/jquery-2.1.4.js"></script>
    <script type="text/javascript">
        $(function () {
            $.get("@Url.Action("About", "Home")",
                $("#frm").serialize()
                , function (data) {
                    alert(data.UserName);
                }, "json");
        });
    </script>
</head>
<body>
    <form id="frm">
        <input name="UserName" type="text" value="使用者名稱" />
        <input name="Password" type="text" value="密碼" />
    </form>
    <div id="container">
    </div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $.get("@Url.Action("About", "Home")",
                $("#frm").serializeArray()
                , function (data) {
                    alert(data.UserName);
                }, "json");
    });
</script>
var fields = $("select, :radio").serializeArray();
$.each(fields, function (i, field) {
    $("#results").append(field.value + " ");
});
var params = { width:1900, height:1200 };
var str = jQuery.param(params);
$("#results").text(str);

　　結果：

width=1680&height=1050

7. $.ajaxSetup()設定全域性Ajax

7.1 解析

　　$.ajaxSetup()用於設定全域性性的Ajax預設選項，一次設定，全域性有效。

　　語法格式：

$.ajaxSetup([options])

其中，引數

　　[options]：可選項引數是一個物件，設定$.ajax()方法中的引數。

7.2 示例

<script type="text/javascript">
    $(function () {
        $.ajaxSetup({
            type: "POST",
            url: "/Home/Index",
            dataType:"json"
        });

        $.ajax({
            success: function (data) {
                // show data
            }
        });
    });
</script>

　　Ajax的其他全域性事件：

事件名稱引數功能描述
ajaxComplete(callback) callback Ajax請求完成時執行函式
ajaxError(callback) callback Ajax請求發生錯誤時執行函式，其中捕捉到的錯誤可以作為最後一個引數進行傳遞
ajaxSend(callback) callback Ajax請求傳送前執行函式
ajaxStart(callback) callback Ajax請求開始時執行函式
ajaxStop(callback) callback Ajax請求結束時執行函式
ajaxSuccess(callback) callback Ajax請求成功時執行函式

　　ajaxStart()及ajaxStop全域性事件示例：

<script type="text/javascript">
    $(function () {
        $("divLoading").ajaxStart(function () {
            $(this).html("正在處理中...").show();
        });
        $("divLoading").ajaxStop(function () {
            $(this).html("處理已完成").hide();
        });
    });
</script>

 

相關文章