Ajax参数详解

发布时间:2023-05-23

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