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