jQuery系列：Ajax

時間  2019-11-18
標籤 jquery 系列 ajax 欄目 JQuery 简体版
原文   原文鏈接

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

1.1 解析

　　載入遠程 HTML 文件代碼並插入至 DOM 中。javascript

　　語法格式：html

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

其中，參數java

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

　　[data]：可選項參數，發送至服務器的數據，key/value格式。ajax

　　[callback]：可選項參數，加載成功後返回至加載頁面的回調函數。json

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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程