詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
更新時間：2017年03月16日 17:21:12 作者：github_26672553
本篇文章主要介紹了詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
本人對vue與后端數(shù)據(jù)交互不是很懂,搜索了很多關(guān)于vue與后端數(shù)據(jù)交互介紹,下面我來記錄一下,有需要了解的朋友可參考。希望此文章對各位有所幫助。
必須引入一個庫：vue-resource
1.獲取普通文本數(shù)據(jù)
比如:a.txt:
welcomet to vue!!!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
msg:'Hello World!',
},
methods:{
get:function(){
//發(fā)送get請求
this.$http.get('a.txt').then(function(res){
alert(res.body);
},function(){
console.log('請求失敗處理');
});
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" @click="get()" value="按鈕">
</div>
</body>
</html>
上面代碼實現(xiàn)了，點擊按鈕，就發(fā)送get請求，然后把拿到的數(shù)據(jù)alert出來。
2.get發(fā)送數(shù)據(jù)給后端
假設(shè)后端地址是get.PHP，代碼如下：
<?php $a = $_GET['a']; $b = $_GET['b']; $c = $a + $b; die($c);
this.$http.get('get.php',{a:1,b:2}).then(function(res){
alert(res.body);
},function(res){
console.log(res.status);
});
this.$http.get('get.php',jsonData) 第二個參數(shù)就是傳到后端的數(shù)據(jù)。
3.post請求
post發(fā)送數(shù)據(jù)到后端，還需要第三個參數(shù)：{emulateJSON:true}
this.$http.post('post.php',{a:1,b:2},{emulateJSON:true}).then(function(res){
alert(res.body);
},function(res){
console.log(res.status);
});
4.jsonp
這是360搜索jsonp的接口： https://sug.so.#/suggest?callback=suggest_so&word=a
我們看vue-resource如何使用jsonp
this.$http.jsonp('https://sug.so.#/suggest',{word:'a'},{jsonp:'callback'}).then(function(res){
console.log(res.data);
},function(res){
console.log(res.status);
});
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了Vue 組件參數(shù)校驗與非props特性的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了在vue中axios設(shè)置timeout超時的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文主要介紹了Vue3 將組件手動渲染到指定元素中的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue封裝全局彈窗警告組件this.$message.success問題
這篇文章主要介紹了vue封裝全局彈窗警告組件this.$message.success問題,具有很的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
vue組件引用另一個組件出現(xiàn)組件不顯示的問題及解決
這篇文章主要介紹了vue組件引用另一個組件出現(xiàn)組件不顯示的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue如何移動到指定位置(scrollIntoView)親測避坑
這篇文章主要介紹了vue如何移動到指定位置(scrollIntoView)親測避坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中消息橫向滾動時setInterval清不掉的問題及解決方法
最近在做項目時,需要進行兩個組件聯(lián)動,一個輪詢獲取到消息,然后將其傳遞給另外一個組件進行橫向滾動展示,結(jié)果滾動的速度越來越快。接下來通過本文給大家分享Vue中消息橫向滾動時setInterval清不掉的問題及解決方法，感興趣的朋友一起看看吧2019-08-08
這篇文章主要介紹了Vue?Hook?封裝通用型表格,設(shè)計通用型表格組件首先,需要設(shè)計一個基礎(chǔ)的表格組件,它接受列配置、數(shù)據(jù)和分頁信息等參數(shù),本文給大家介紹的非常詳細,需要的朋友可以參考下2024-08-08
基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗
VuePress為每一個由它生成的頁面提供預(yù)加載的html，不僅加載速度極佳，同時對seo非常友好。這篇文章主要介紹了基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗,需要的朋友可以參考下2018-04-04