jQuery $.ajax()方法的使用

前面幾節，我們介紹了很多有關 Ajax 的方法，如 load()方法、$.getJSON() 方法、$.get() 方法、$.post() 方法。事實上，這幾種方法從本質上來說都是使用 $.ajax() 方法來實現的。換句話來說，它們都是 $.ajax() 方法的簡化版，它們能實現的功能，$.ajax() 都能實現，因為 $.ajax() 是最底層的方法。

語法：

$.ajax(options)

$.ajax() 方法只有一個引數，這個引數是一個物件。該物件中包含了 Ajax 請求所需要的各種資訊，並且以“鍵值對”的形式存在。

options 是一個物件，這個物件內部有很多引數可以設定，所有引數都是可選的，如表 1 所示。

表 1：$.ajax() 方法中的引數
引數	說明
url	被載入的頁面地址
type	資料請求方式，"get" 或 "post"，預設為 "get"
data	傳送到伺服器的資料，可以是字串或物件
dataType	伺服器返回資料的型別，如: text、html、script、json、xml
beforeSend	傳送請求前可以修改 XMLHttpRequest 物件的函數
complete	請求“完成”後的回撥函數
success	請求“成功”後的回撥函數
error	請求“失敗”後的回撥函數
timeout	請求超時的時間，單位為“毫秒”
global	是否響應全域性事件，預設為 true （即響應）
async	是否為非同步請求，預設為 true （即非同步）
cache	是否進行頁面快取，true 表示快取，false 表示不快取

舉例：$.ajax() 代替 $.getJSON()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                $.ajax({
                    url:"info.json",
                    type:"get",
                    dataType:"json",
                    success:function(data){
                        //定義一個變數，用於儲存結果
                        var str = "";
                        $.each(data, function (index, info) {
                            str += "姓名：" + info["name"] + "<br/>";
                            str += "性別：" + info["sex"] + "<br/>";
                            str += "年齡：" + info["age"] + "<br/>";
                            str += "<hr/>";
                        })
                        //插入資料
                        $("div").html(str);
                    }
                })
            })
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="獲取資料" />
    <div></div>
</body>
</html>

預設情況下，預覽效果如圖 1 所示。

圖 1：預設效果