Ajax參數詳解

一、url

url是發送請求的地址，可以是相對地址或者絕對地址，也可以是一個函數，函數返回值為發送請求的地址。

    $.ajax({
        url:"/api/users",    //相對地址
        method:"GET",
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

    $.ajax({
        url:"http://www.example.com/api/users",    //絕對地址
        method:"GET",
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

    $.ajax({
        url:function(){     //函數返回值為發送請求的地址
            return "/api/users?id="+$("#userId").val();
        },
        method:"GET",
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

二、method

method指定HTTP請求方法，包括GET、POST、PUT、DELETE等。

    $.ajax({
        url:"/api/users",
        method:"GET",      //指定GET方法
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

    $.ajax({
        url:"/api/users",
        method:"POST",     //指定POST方法
        data:{
            "name":"John",
            "age":"18"
        },
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

三、data

data用來指定發送給伺服器的數據，可以是JSON格式的數據、XML格式的數據、FormData對象。

    $.ajax({
        url:"/api/users",
        method:"POST",
        data:{
            "name":"John",
            "age":"18"
        },                  //發送JSON格式的數據
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

    $.ajax({
        url:"/api/users",
        method:"POST",
        data:$("#userData").serialize(),    //發送表單數據
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

    var formData = new FormData();
    formData.append("file", $("#fileUpload")[0].files[0]);
    
    $.ajax({
        url:"/api/upload",
        method:"POST",
        data:formData,      //發送FormData對象
        contentType:false,
        processData:false,
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

四、headers

headers用來指定HTTP請求頭。

    $.ajax({
        url:"/api/users",
        method:"GET",
        headers:{
            "Authorization":"Bearer "+localStorage.getItem("accessToken")    //授權頭
        },
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

    $.ajax({
        url:"/api/users",
        method:"POST",
        headers:{
            "Content-Type":"application/json"   //指定請求體類型
        },
        data:JSON.stringify({
            "name":"John",
            "age":"18"
        }),
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

五、dataType

dataType用來指定伺服器返回的數據類型，可以是”json”、”xml”、”html”、”text”。

    $.ajax({
        url:"/api/users",
        method:"GET",
        dataType:"json",        //指定返回JSON格式的數據
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

    $.ajax({
        url:"/api/users",
        method:"GET",
        dataType:"xml",         //指定返回XML格式的數據
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

六、async

async用來指定請求是否為非同步，默認為true。

    $.ajax({
        url:"/api/users",
        method:"GET",
        async:false,        //同步請求
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

七、cache

cache用來指定是否允許瀏覽器緩存請求結果，默認為true。

    $.ajax({
        url:"/api/users",
        method:"GET",
        cache:false,        //不允許緩存
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

八、timeout

timeout用來指定請求超時時間。

    $.ajax({
        url:"/api/users",
        method:"GET",
        timeout:5000,       //設置超時時間為5秒
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })

九、complete

complete用來指定請求完成後的回調函數。

    $.ajax({
        url:"/api/users",
        method:"GET",
        complete:function(xhr,status){     //請求完成後的回調函數
            console.log(xhr);
            console.log(status);
        }
    })

十、global

global用來指定是否開啟全局ajax事件，默認為true。

    $.ajax({
        url:"/api/users",
        method:"GET",
        global:false,      //關閉全局ajax事件
        success:function(res){
            console.log(res);
        },
        error:function(err){
            console.log(err);
        }
    })