Vue2.0学习笔记-13、vue-resouces（get、post一级jsonp跨域请求）
程序员文章站
2022-06-06 23:15:53
...
1、get和post请求
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!---引入vue-resouces资源，必须在引入vue以后再引入--->
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<button @click="getJson">get请求</button>
<button @click="postJson">post请求</button>
</div>
<script type="text/javascript">
Vue.http.options.root = "http://localhost:3000/"; //设置全局根路径
var vm = new Vue({
el: "#app",
data: {
msg: null,
},
methods: {
getJson: function () {
this.$http.get("get").then(
function (response) {
this.msg = response.body;
},
function (error) {
this.msg = error;
}
);
},
postJson: function () {
this.$http.post("post/本田/245", { emulateJSON: true }).then(
function (response) {
this.msg = response.body;
},
function (error) {
this.msg = error;
}
);
},
},
});
</script>
</body>
</html>
get请求执行效果：
post请求执行效果：
上图中是post请求执行成功后返回的内容
3、jsonp跨域请求
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">{{msg}}</div>
<script type="text/javascript">
Vue.http.options.root = "http://localhost:3000/"; //设置全局根路径
var vm = new Vue({
el: "#app",
data: {
msg: null,
},
methods: {},
mounted: function () {
this.$http
.jsonp("jsonp", {
jsonp: "cb",//由于我在服务端将回调函数名称改为了cb，因此这里必须指明回调函数名称（服务端默认的回调函数名称为callback，vue-resouces的jsonp请求默认的回调函数名称也是callback）
})
.then(function (response) {
if (response.status == 200) this.msg = response.body;
});
},
});
</script>
</body>
</html>
这就是vue里面的ajax，没啥说的，自己敲两遍就懂了；麻烦的地方是：我照着网上的教程学这个地方，人家发送get、post和jsonp请求都有请求地址(Url)，我也没有，我只能自己写，以前会写php和jsp，但是这两个技术都被淘汰了（主要是忘了，2333）,没办法新学了express框架自己写的接口。多好，学一个新知识的同时又掌握了另一个新知识， 开心