zoukankan      html  css  js  c++  java
  • vue $http请求服务

    vue中的$http服务  需要引入一个叫vue-resource.js的文件,因为vue.js中没有$http服务。如果需要使用这个服务去百度下载vue-resource.js 然后引进项目即可。

    还有一种方法是在开发项目中 需要,这样我们直接在npm 中下载  npm install vue-resource 即可 。然后在main.js中配置import VueResource from 'vue-resource';  然后用Vue.use(VueResource) 方法启用插件。

    第一种get方法

    <!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文件:

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

    get方法有两个参数get("PHP文件",“参数”)

    post方法:

    <!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:

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

    post方法有三个参数post("php文件","参数","emulateJSON:true")

    emulateJSON:true 模拟一个JSON数据发送到服务器,这样才可以成功运行

    转: https://blog.csdn.net/qq_36947128/article/details/72832977

  • 相关阅读:
    js----定义变量的几种方式
    Vue----项目增加百度统计
    Vuex----核心概念和API
    Vuex----理解
    回到学校,国庆收假的第一天
    再次回到武汉
    收获的季节,最忙其实也是最没有收获的时光
    虚无缥缈的自信,一落千丈的打击
    愤怒、愤怒,终于适应了奔波
    总是骗人的你
  • 原文地址:https://www.cnblogs.com/fps2tao/p/9378799.html
Copyright © 2011-2022 走看看