詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
本人對(duì)vue與后端數(shù)據(jù)交互不是很懂,搜索了很多關(guān)于vue與后端數(shù)據(jù)交互介紹,下面我來記錄一下,有需要了解的朋友可參考。希望此文章對(duì)各位有所幫助。
必須引入一個(gè)庫：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請(qǐng)求
this.$http.get('a.txt').then(function(res){
alert(res.body);
},function(){
console.log('請(qǐng)求失敗處理');
});
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" @click="get()" value="按鈕">
</div>
</body>
</html>
上面代碼實(shí)現(xiàn)了，點(diǎn)擊按鈕，就發(fā)送get請(qǐng)求，然后把拿到的數(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) 第二個(gè)參數(shù)就是傳到后端的數(shù)據(jù)。
3.post請(qǐng)求
post發(fā)送數(shù)據(jù)到后端，還需要第三個(gè)參數(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);
});
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Avue實(shí)現(xiàn)動(dòng)態(tài)查詢與數(shù)據(jù)展示的示例代碼
- vue中輕量級(jí)模糊查詢fuse.js使用方法步驟
- vue中el表單的簡(jiǎn)單查詢方法
- 5種vue模糊查詢的方法總結(jié)
- vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢)
- vue中wangEditor的使用及回顯數(shù)據(jù)獲取焦點(diǎn)的方法
- Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互
- vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
- Vue?3?表單與后端數(shù)據(jù)交互之查詢并回顯數(shù)據(jù)步驟流程
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue 組件參數(shù)校驗(yàn)與非props特性的方法
這篇文章主要介紹了Vue 組件參數(shù)校驗(yàn)與非props特性的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
在vue中axios設(shè)置timeout超時(shí)的操作
這篇文章主要介紹了在vue中axios設(shè)置timeout超時(shí)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue3 將組件手動(dòng)渲染到指定元素中的方法實(shí)現(xiàn)
本文主要介紹了Vue3 將組件手動(dòng)渲染到指定元素中的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue封裝全局彈窗警告組件this.$message.success問題
這篇文章主要介紹了vue封裝全局彈窗警告組件this.$message.success問題,具有很的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue組件引用另一個(gè)組件出現(xiàn)組件不顯示的問題及解決
這篇文章主要介紹了vue組件引用另一個(gè)組件出現(xiàn)組件不顯示的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue如何移動(dòng)到指定位置(scrollIntoView)親測(cè)避坑
這篇文章主要介紹了vue如何移動(dòng)到指定位置(scrollIntoView)親測(cè)避坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法
最近在做項(xiàng)目時(shí),需要進(jìn)行兩個(gè)組件聯(lián)動(dòng),一個(gè)輪詢獲取到消息,然后將其傳遞給另外一個(gè)組件進(jìn)行橫向滾動(dòng)展示,結(jié)果滾動(dòng)的速度越來越快。接下來通過本文給大家分享Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法，感興趣的朋友一起看看吧2019-08-08
這篇文章主要介紹了Vue?Hook?封裝通用型表格,設(shè)計(jì)通用型表格組件首先,需要設(shè)計(jì)一個(gè)基礎(chǔ)的表格組件,它接受列配置、數(shù)據(jù)和分頁信息等參數(shù),本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn)
VuePress為每一個(gè)由它生成的頁面提供預(yù)加載的html，不僅加載速度極佳，同時(shí)對(duì)seo非常友好。這篇文章主要介紹了基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn),需要的朋友可以參考下2018-04-04