【Ajax】 jQuery，axios，fetch发送ajax请求

Aid前端 2021-09-27

454

【Ajax】 jQuery，axios，fetch发送ajax请求

jQuery发送ajax请求

get方法

方法：jQuery.get(url, [data], [callback], [type])

参数：

url: 待载入页面的URL地址

data: 待发送 Key/value 参数。

callback: 载入成功时回调函数。

type: 返回内容格式，xml, html, script, json, text, _default。

$.get('http://127.0.0.1:8000/jQuery-server',{a:1,b:2},function(data){
    console.log(data);  //hello , I'am jQuery
});

// 注意：{a:1,b:2}是get请求url中的查询字符串内容

post方法

方法：jQuery.post(url, [data], [callback], [type])

参数：

url: 发送请求地址。

data: 待发送 Key/value 参数。

callback: 发送成功时回调函数。

type: 返回内容格式，xml, html, script, json, text, _default。

$.post('http://127.0.0.1:8000/jQuery-server',{a:1,b:2},function(data){
    console.log(data);  //hello , I'am jQuery
},'json');

// 注意：{a:1,b:2}是post请求的请求体

通用方法

方法：jQuery.ajax(url,[settings])

参数：

url: 一个用来包含发送请求的URL字符串。

settings: AJAX 请求设置。所有选项都是可选的。

settings:

参数	功能	说明
context	这个对象用于设置Ajax相关回调函数的上下文	也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）
crossDomain	如果你想强制跨域请求（如JSONP形式）同一域，设置crossDomain为true	默认：同域请求为false
data	发送到服务器的数据。	将自动转换为请求字符串格式。
dataType	预期服务器返回的数据类型。（xml、html、script、json、jsonp、text）	如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
headers	一个额外的"{键:值}"对映射到请求一起发送。	请求头信息
jsonp	在一个jsonp请求中重写回调函数的名字。
jsonpCallback	为jsonp请求指定一个回调函数名。
statusCode	一组数值的HTTP代码和函数对象，当响应时调用了相应的代码
complete	请求完成后回调函数 (请求成功或失败之后均调用)。参数：XMLHttpRequest 对象和一个描述成功请求类型的字符串。	参数：XMLHttpRequest, textStatus
success	请求成功后的回调函数。	参数：data, textStatus, jqXHR
error	请求失败时调用此函数	参数：XMLHttpRequest, textStatus, errorThrown
timeout	设置请求超时时间（毫秒）。
type	请求方式 ("POST" 或 "GET")，	默认为 "GET"
url	发送请求的地址	默认: 当前页地址
username	用于响应HTTP访问认证请求的用户名
password	用于响应HTTP访问认证请求的密码

$.ajax({
    url:'http://127.0.0.1:8000/jQuery-server',
    data:{a:100, b:222},
    type:'GET',
    dataType:'json',
    success:function(data){
        console.log(data)
    },
    timeout:2000,
    error:function(){
        console.log('出错了')
    },
    headers:{
        c:300,
        d:400
    }
})

axios发送ajax请求

在使用axios发送ajax请求前配置baseURL

axios.defaults.baseURL = 'http://localhost:8000'

get方法

axios.get('/axios-server', {
    //url参数
    params:{
        id:1000,
        vip:12
    },
    //请求头信息
    headers:{
        name:'hanser',
        age:'2'
    }
}).then(value=>{
    console.log(value)
})

post方法

axios.post('/axios-server', {
        username:'admin',
        password:'123'
    },{
    //url参数
    params:{
        id:1,
        vip:123
    },
    //请求头参数
    headers:{
        name:'yousa',
        age:'23'
    },
    //请求体
    
}).then(value=>{
    console.log(value)
})

通用方法

axios({
    method:'POST',
    url:'/axios-server',
    //url参数
    params:{
        vip:10,
        id:123
    },
    //头信息
    headers:{
        a:100,
        b:200
    },
    //请求体参数
    data:{
        name:'hanser',
        age:'7'
    }
}).then(response=>{
    console.log(response)
})

fetch发送ajax请求

fetch('http://localhost:8000/fetch-server',{
    //请求方法
    method:'POST',
    //请求头
    headers:{
        name:'hanser'
    },
    //请求体
    body: 'name=admin&pd=admin'
}).then(Response=>{
    console.log(Response)
    return Response.text()
}).then(Response=>{
    console.log(Response)
})

你可以参考MDN的相关文档：MDN：使用 Fetch^[1]

References

[1]
MDN：使用 Fetch: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

文章转载自Aid前端，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

【Ajax】 jQuery，axios，fetch发送ajax请求