本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考。希望此文章对各位有所帮助。
必须引入一个库:vue-resource
<强> 1。获取普通文本数据
比如:a.txt:
welcomet vue ! ! !
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> & lt;/title>
& lt;元charset=皍tf - 8”比;
& lt;脚本src=" http://unpkg.com/vue/dist/vue.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function () {
var vm=new Vue ({
埃尔:“#箱”,
数据:{
味精:“Hello World !”
},
方法:{
得到:函数(){//发送得到请求
美元。http.get (a.txt)(函数(res) {
警报(res.body);
},函数(){
console.log(“请求失败处理”);
}）;
}
}
}）;
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=昂凶印北?
& lt;输入类型=鞍磁ァ盄click=?)”价值=" https://www.yisu.com/zixun/按钮”比;
& lt;/div>
& lt;/body>
& lt;/html>
之前
上面代码实现了,点击按钮,就发送得到请求,然后把拿到的数据提醒出来。
<强> 2。让发送数据给后端
假设后端地址是get.PHP,代码如下:
& lt; & # 63; php
$=$ _GET [a];
$ b=$ _GET [b];
$ c=$ + $ b;
死($ c);
之前
这个。http.get美元(get.php, {1, b: 2}),然后(函数(res) {
警报(res.body);
},函数(res) {
console.log (res.status);
});
。美元http.get (get.php, jsonData)第二个参数就是传到后端的数据。
<强> 3。帖子请求
文章发送数据到后端,还需要第三个参数:{emulateJSON:真}
这个。http.post美元(post.php, {1, b: 2}, {emulateJSON:真}),然后(函数(res) {
警报(res.body);
},函数(res) {
console.log (res.status);
});
<强> 4。jsonp
360年这是搜索jsonp的接口:https://sug.so.360.cn/suggest& # 63;调=suggest_so&词=
http.jsonp美元。(“https://sug.so.360.cn/suggest”,{词:“a”}, {jsonp:“回调”}),然后(函数(res) {
console.log (res.data);
},函数(res) {
console.log (res.status);
});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
