vue框架实现前端和后端交互的方法

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

怎么实现vue.js的前后端交互呢？

1. 使用$http.get()方法

获取一个普通的文本数据

this.$http.get('a.txt').then(function(res){

alert(res.data);

},function(res){

alert(res.status);

});

向服务器发送数据（此时需要为get方法传递第二个参数 {a:1, b:2} , 即所要发送的数据）

this.$http.get('a.php', {

a: 1,

b: 2

}).then(function(res) {

alert(res.data);

}, function(res) {

alert(res.status);

});

2. 使用$http.post()方法

此时需要为post方法传递第三个参数 {emulateJSON: true}

this.$http.post('a.php', {

a: 1,

b: 2

}, {

emulateJSON: true

}).then(function(res) {

alert(res.data);

}, function(res) {

alert(res.status);

});

3. 使用$http.jsonp()方法

访问360搜索接口

this.$http.jsonp('https://sug.so.360.cn/suggest', {

params: {

word: 'a'

}

}).then(function(res) {

alert(res.data.s);

}, function(res) {

alert(res.status);

});

访问baidu搜索接口

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {

params: {

wd: 'a'

},

jsonp: 'cb'

}).then(function(res) {

alert(res.data.s);

}, function(res) {

alert(res.status);

});

以上就是vue怎么和后端交互的详细内容。

转载请注明来自：https://www.qianyuthink.com/news/7583.html

上一页：Vue可以用来做什么项目
下一页：Vue如何使用API提供服务