大家好,又见面了,我是你们的朋友全栈君。
vue笔记(1): https://blog.csdn.net/qq_43537987/article/details/93402865
axios
的第三方包实现实现数据的请求参考网址: https://www.runoob.com/vue2/vuejs-ajax.html https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
errorCallback(失败时的回调)参数可省
getInfo() {
// 发起get请求
// 当发起get请求之后, 通过 .then 来设置成功的回调函数
//如果需要传递数据,可以使用 this.$http.get('get.php',{params : jsonData}) 格式, 第二个参数 jsonData 就是传到后端的数据。
this.$http.get('http://localhost/anli/select.php',{
params:{
a:1,b:2}}).then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
console.log(result)
console.log(result.body)
})
},
postInfo() {
// 发起 post 请求 application/x-wwww-form-urlencoded
// 手动发起的 Post 请求,默认没有表单格式,所以,有的服务器处理不了
// 通过 post 方法的第三个参数, { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('/anli/demo_test_post.php', {
name: "菜鸟教程",
url: "http://www.runoob.com"}, {
emulateJSON: true}).then(result => {
console.log(result.body)
}, res => {
console.log(res.status)
})
},
jsonpInfo() {
// 发起JSONP 请求
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
}, res => {
console.log(res.status)
})
}
JSONP的实现原理
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue-2.4.0.js"></script>
<!-- 注意:vue-resource 依赖于 Vue,所以先后顺序要注意 -->
<!-- this.$http.jsonp -->
<script src="./js/vue-resource-1.3.4.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
<input type="button" value="jsonp请求" @click="jsonpInfo">
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
},
methods: {
getInfo() {
// 发起get请求
// 当发起get请求之后, 通过 .then 来设置成功的回调函数
//如果需要传递数据,可以使用 this.$http.get('get.php',{params : jsonData}) 格式,
// 第二个参数 jsonData 就是传到后端的数据。
this.$http.get('http://localhost/anli/select.php', {
params: {
a: 1, b: 2}}).then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
console.log(result)
console.log(result.body)
})
},
postInfo() {
// 发起 post 请求 application/x-wwww-form-urlencoded
// 手动发起的 Post 请求,默认没有表单格式,所以,有的服务器处理不了
// 通过 post 方法的第三个参数, { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('/anli/demo_test_post.php', {
name: "菜鸟教程",
url: "http://www.runoob.com"
}, {
emulateJSON: true}).then(result => {
console.log(result.body)
}, res => {
console.log(res.status)
})
},
jsonpInfo() {
// 发起JSONP 请求,案例的这个接口不好使。。。
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
}, res => {
console.log(res.status)
})
}
}
});
</script>
</body>
</html>
https://github.com/pagekit/vue-resource/blob/HEAD/docs/config.md
未配置前:
this.$http.jsonp('http://vue.studyit.io/api/jsonp')
this.$http.get('http://vue.studyit.io/api/get')
配置
Vue.http.options.root = 'http://vue.studyit.io/';
//如果我们通过全局配置了请求的接口的根域名,在每次单独发起http的时候,请求的url路径应该以相对路径开头,前面不能带 / ,否则不会启用根路径做拼接
this.$http.jsonp('api/jsonp')
this.$http.get('api/get')
Vue.http.options.emulateJSON = true;
this.$http.post('/anli/demo_test_post.php', {
name: "菜鸟教程",
url: "http://www.runoob.com"
}).then(result => {
console.log(result.body)
}, res => {
console.log(res.status)
})
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/127446.html原文链接:https://javaforall.cn