詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource

更新時(shí)間：2017年03月16日 17:21:12 作者：github_26672553

本篇文章主要介紹了詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

本人對(duì)vue與后端數(shù)據(jù)交互不是很懂,搜索了很多關(guān)于vue與后端數(shù)據(jù)交互介紹,下面我來(lái)記錄一下,有需要了解的朋友可參考。希望此文章對(duì)各位有所幫助。

必須引入一個(gè)庫(kù)：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出來(lái)。

這里寫(xiě)圖片描述

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

這里寫(xiě)圖片描述

我們看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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
后端

相關(guān)文章

詳解vue之頁(yè)面緩存問(wèn)題(基于2.0)
本篇文章主要介紹了vue之頁(yè)面緩存問(wèn)題(基于2.0)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
vue獲取驗(yàn)證碼倒計(jì)時(shí)組件
這篇文章主要為大家詳細(xì)介紹了vue獲取驗(yàn)證碼倒計(jì)時(shí)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-08-08
el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式
這篇文章主要介紹了el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue.js element-ui tree樹(shù)形控件改iview的方法
這篇文章主要介紹了vue.js element-ui tree樹(shù)形控件改iview的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue實(shí)現(xiàn)靜態(tài)頁(yè)面點(diǎn)贊和取消點(diǎn)贊功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)靜態(tài)頁(yè)面點(diǎn)贊和取消點(diǎn)贊的功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
Vue.js函數(shù)式組件的全面了解
函數(shù)式組件就是函數(shù)是組件,組件是函數(shù),它的特征是沒(méi)有內(nèi)部狀態(tài)、沒(méi)有生命周期鉤子函數(shù)、沒(méi)有this（不需要實(shí)例化的組件）,這篇文章主要給大家介紹了關(guān)于Vue.js函數(shù)式組件的相關(guān)資料,需要的朋友可以參考下
2021-10-10
vite項(xiàng)目import.meta.env如何能獲取非VITE開(kāi)發(fā)的環(huán)境變量
這篇文章主要介紹了vite項(xiàng)目import.meta.env如何能獲取非VITE開(kāi)發(fā)的環(huán)境變量問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05
vue修改vue項(xiàng)目運(yùn)行端口號(hào)的方法
本篇文章主要介紹了vue修改vue項(xiàng)目運(yùn)行端口號(hào)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
Vue寶典之this.$refs屬性的使用
Vue.js中的refs屬性是一個(gè)非常有用的特性,它允許我們?cè)诮M件中操作 DOM 元素和組件實(shí)例,本文來(lái)介紹一下Vue寶典之this.$refs屬性的使用,感興趣的可以了解一下
2023-12-12
vue-cli3配置favicon.ico和title的流程
這篇文章主要介紹了vue-cli3配置favicon.ico和title的流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10