基础知识普及
在使用Ajax跨域请求时，如果设置Header的ContentType为application/json,会分两次发送请求。第一次先发送Method为OPTIONS的请求到服务器，这个请求会询问服务器支持哪些请求方法（GET,POST等），支持哪些请求头等等服务器的支持情况。等到这个请求返回后，如果原来我们准备发送的请求符合服务器的规则，那么才会继续发送第二个请求，否则会在Console中报错。为什么在跨域的时候设置ContentType为application/json时会请求两次？其实JQuery的文档对此有做说明。
对于JSONP的请求，后端可以不返回数据，但是必须返回一个方法名，并且带括号；
vue-resources
vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。
文档地址：https://github.com/pagekit/vue-resource/blob/HEAD/docs/http.md
全局配置
文档地址：https://github.com/pagekit/vue-resource/blob/fe268fa1d6053ede5f34aef9a11e1a424a70446c/docs/config.md
// 全局设置
Vue.http.options.root = '/root' // 设置全局http请求域名
// Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk'; // 设置全局http请求账号密码
Vue.http.options.emulateJSON = true; // 设置全局的表单数据类型为普通表单提交application/x-www-form-urlencoded
// 局部设置
new Vue({
http: {
root: '/root',
headers: {
Authorization: 'Basic YXBpOnBhc3N3b3Jk'
}
}
})
GET请求示例
methods: {
get() {
this.$http.get('api/json/',{}).then((result) => {
console.log(result)
}, (result) => {
console.log(result)
});
}
}
POST请求示例
methods: {
post() {
// this.$http.post('api/json/',{},{emulateJSON:true}).then((result) => {
this.$http.post('api/json/',{},{}).then((result) => {
console.log(result)
}, (result) => {
console.log(result)
});
}
}
JSONP请求示例
# 后端
class json(View):
def get(self, request):
print(self.request.GET)
callback = self.request.GET.get('callback')
data = {
"username": 'cce',
"password": 'caichangen'
}
return HttpResponse('%s(%s)' % (callback, data))
// 前端
methods: {
axios() {
this.$http.jsonp('api/json/'').then((result) => {
console.log(result.body)
});
}
}