vue $http請求服務

時間 2019-12-05

標籤 vue http 請求服務欄目 HTTP/TCP 简体版

原文原文鏈接

vue中的$http服務須要引入一個叫vue-resource.js的文件，由於vue.js中沒有$http服務。若是須要使用這個服務去百度下載vue-resource.js 而後引進項目便可。php

還有一種方法是在開發項目中須要，這樣咱們直接在npm 中下載 npm install vue-resource 便可。而後在main.js中配置import VueResource from 'vue-resource'; 而後用Vue.use(VueResource) 方法啓用插件。html

第一種get方法vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="js/vue-resource.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="點擊獲取" @click="get()"/>
        </div>
        <script>
            new Vue({
                
                el:"#app",
                methods:{
                    get:function(){
                        this.$http.get('get.php',{
                            a:10,
                            b:1
                        }).then(function(res){
                            alert(res.data);
                            
                        },function(res){
                            alert(res.status)
                        });
                    }
                }
                
            })
            
            
        </script>
    </body>
</html>

get.php文件：npm

<?php
$a=$_GET['a'];
$b=$_GET['b'];
echo $a-$b;
?>

get方法有兩個參數get("PHP文件"，「參數」)服務器

post方法：app

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="js/vue-resource.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="點擊獲取" @click="get()"/>
        </div>
        <script>
            new Vue({
                
                el:"#app",
                methods:{
                    get:function(){
                        this.$http.post('post.php',{
                            a:2,
                            b:3
                        },{
                            emulateJSON:true
                        }).then(function(res){
                            alert(res.data);
                            
                        },function(res){
                            alert(res.status)
                        });
                    }
                }
                
            })
            
            
        </script>
    </body>
</html>

post.php:vue-resource

<?php
$a=$_POST['a'];
$b=$_POST['b'];
echo $a+$b;
?>

post方法有三個參數post("php文件"，"參數","emulateJSON:true")post

emulateJSON:true 模擬一個JSON數據發送到服務器，這樣才能夠成功運行this

轉: https://blog.csdn.net/qq_36947128/article/details/72832977spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。