詳解vue與後端資料互動(ajax):vue-resource

詳解vue與後端資料互動(ajax):vue-resource
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

本人對vue與後端資料互動不是很懂,搜尋了很多關於vue與後端資料互動介紹,下面我來記錄一下,有需要了解的朋友可參考。希望此文章對各位有所幫助。

必須引入一個庫:vue-resource

1.獲取普通文字資料

比如: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(){
//傳送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>

上面程式碼實現了,點選按鈕,就傳送get請求,然後把拿到的資料alert出來。

這裡寫圖片描述

2.get傳送資料給後端

假設後端地址是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) 第二個引數就是傳到後端的資料。

3.post請求

post傳送資料到後端,還需要第三個引數:{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.360.cn/suggest?callback=suggest_so&word=a

這裡寫圖片描述 

我們看vue-resource如何使用jsonp


this.$http.jsonp('https://sug.so.360.cn/suggest',{word:'a'},{jsonp:'callback'}).then(function(res){
console.log(res.data);
},function(res){
console.log(res.status);
});

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

詳解vue-Resource(與後端資料互動)Vue2學習筆記之請求資料互動vue-resource詳解vue前後臺資料互動vue-resource文件vue之資料互動例項程式碼使用vue-resource進行資料互動的例項Vue中的資料監聽和資料互動案例解析vue之資料互動例項程式碼vuejs父子元件之間資料互動詳解vue利用axios來完成資料的互動Vue2.0子同級元件之間資料互動方法vue.js前後端資料互動之提交資料操作詳解

相關文章

前端開發 最新文章