请求示例:
$.ajax({
url: '/api/test',
type: 'GET',
data: data,
}).done(function(data, ts, xhr) {
}).fail(function(xhr, ts, err) {
}).always(function(xhr, ts) {
})
$.ajax({
url: '/api/test',
type: 'POST',
data: data,
}).done(function(data, ts, xhr) {
}).fail(function(xhr, ts, err) {
}).always(function(xhr, ts) {
})
$.ajax({
url: '/api/test',
type: 'POST',
data: new FormData(form),
processData: false,
contentType: false,
cache: false,
}).done(function(data, ts, xhr) {
}).fail(function(xhr, ts, err) {
}).always(function(xhr, ts) {
})
$.ajax({
url: '/api/test',
type: 'POST',
data: JSON.stringify(data),
processData: false,
contentType: 'application/json',
cache: false,
}).done(function(data, ts, xhr) {
}).fail(function(xhr, ts, err) {
}).always(function(xhr, ts) {
})
$.ajax({
url: '/api/test',
type: 'POST',
data: JSON.stringify({type: 'json'}),
processData: false,
contentType: 'application/json',
cache: false,
xhrFields: {
withCredentials: true
},
beforeSend: function(XMLHttpRequest) {
console.group('发送之前')
console.log(XMLHttpRequest)
console.groupEnd()
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.group('请求错误')
console.log(XMLHttpRequest, textStatus, errorThrown)
console.groupEnd()
console.log(XMLHttpRequest.status)
},
dataFilter: function(data, type) {
console.group('预处理数据')
console.log(data, type)
console.groupEnd()
return data
},
success: function(data, textStatus, XMLHttpRequest) {
console.group('请求成功')
console.log(data, textStatus, XMLHttpRequest)
console.groupEnd()
console.log(XMLHttpRequest.getResponseHeader("content-type"))
},
complete: function(XMLHttpRequest, textStatus) {
console.group('请求完成')
console.log(XMLHttpRequest, textStatus)
console.groupEnd()
}
})
$.ajax({
url: 'https://18e4872b20.endpoints.dev',
}).done(function(data, ts, xhr) {
console.log('成功', {data, ts, xhr})
}).fail(function(xhr, ts, err) {
console.log('失败', {xhr, ts, err})
}).always(function(xhr, ts) {
console.log('完成', {xhr, ts})
}).then(function(data, ts, xhr) {
console.log('成功', {data, ts, xhr})
return data
}, function(xhr, ts, err) {
console.log('失败', {xhr, ts, err})
}).catch(function(xhr, ts, err) {
console.log('失败', {xhr, ts, err})
})
axios({
url: '/api/test',
method: 'POST',
params: data,
}).then((res) => {
console.log(res.data)
}).catch((err) => {
}).finally(() => {
})
axios({
url: '/api/test',
method: 'POST',
data: data,
}).then((res) => {
console.log(res.data)
}).catch((err) => {
}).finally(() => {
})
axios({
url: '/api/test',
method: 'POST',
data: new URLSearchParams(data),
}).then((res) => {
console.log(res.data)
}).catch((err) => {
}).finally(() => {
})
axios({
url: '/api/test',
method: 'POST',
data: new FormData(form),
}).then((res) => {
console.log(res.data)
}).catch((err) => {
}).finally(() => {
})
fetch(url)
.then(res => res.text())
.then(html => console.log(html))
fetch(url+'?'+new URLSearchParams(data).toString())
.then(res => res.json())
.then(data => console.log(data))
fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json',
})
})
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error))
fetch(url, {
method: 'POST',
body: new URLSearchParams(data),
})
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error))
fetch(url, {
method: 'POST',
body: new FormData(form)
})
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error))
fetch('flowers.jpg')
.then(function(res) {
if (res.ok) {
return res.blob()
}
throw new Error('Network response was not ok.')
}).then(binary => {
let objectURL = URL.createObjectURL(binary)
console.log(objectURL)
}).catch(error => {
console.log('There has been a problem with your fetch operation: ', error.message)
})
fetch(url, {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json',
'Authorization': 'xxx',
}),
body: JSON.stringify(data),
mode: 'cors',
credentials: 'same-origin',
cache: 'no-cache',
redirect: 'follow',
referrer: '',
referrerPolicy: 'no-referrer',
integrity: '',
keepalive: false,
signal: null,
follow: 20,
timeout: 0,
compress: true,
size: 0,
agent: null
})
.then(res => {
console.log(res.ok)
console.log(res.status)
console.log(res.statusText)
console.log(res.url)
console.log(res.type)
console.log(res.redirected)
console.log(res.headers.get('Content-Type'))
console.log(res.headers.get('Date'))
return res.json().then(json => {
})
})
.then(data => console.log(data))
.catch(error => console.error(error))
new URL()
new URLSearchParams()
new FormData()
new Headers()
let url = new URL('https://example.com?foo=1&bar=2')
let params = new URLSearchParams(url.search)
let params2 = new URLSearchParams("foo=1&bar=2")
let params2a = new URLSearchParams("?foo=1&bar=2")
let params3 = new URLSearchParams([["foo", "1"], ["bar", "2"]])
let params4 = new URLSearchParams({"foo": "1", "bar": "2"})
let form = document.querySelector('form')
let formData = new FormData(form)
let data = {a: 1, b: 2}
Object.keys(data).map(k => {
data[k] && formData.append(k, data[k])
})
const fileField = document.querySelector('input[type="file"]')
formData.append('avatar', fileField.files[0])
const photos = document.querySelector('input[type="file"][multiple]')
for (let i = 0; i < photos.files.length; i++) {
formData.append('photos', photos.files[i])
}
let myHeaders = new Headers({ 'Content-Type' : 'image/jpeg', 'Accept-Charset' : 'utf-8', 'X-My-Custom-Header' : 'Zeke are cool' })
const { URL, URLSearchParams } = require('url')
const querystring = require('querystring')
const qs = require('qs')
const FormData = require('form-data')
const Headers = require('headers-utils')
let obj = {
name: 'john',
favs: ['a', 'b'],
address: {city: 'dd'},
friends: [{name:'tom'}, {name:'jonny'}]
}
querystring.stringify(obj)
qs.stringify(obj)