vue-$http请求服务

最新推荐文章于 2024-05-06 16:56:42 发布

HOLD ON!

最新推荐文章于 2024-05-06 16:56:42 发布

阅读量1.5k

点赞数

原文链接：https://www.cnblogs.com/fps2tao/p/9378799.html

版权

vue $http请求服务

可以直接单独引入vue.js和vue-resource.js

然后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方法, 或者参数为{params:{a:1, b:2}}

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

HOLD ON!

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-$http请求服务

vue $http请求服务vue中的$http服务需要引入一个叫vue-resource.js的文件，因为vue.js中没有$http服务。如果需要使用这个服务去百度下载vue-resource.js 然后引进项目即可。还有一种方法是在开发项目中需要，这样我们直接在npm 中下载 npm install vue-resource 即可。然后在main.js中配置import Vu...
复制链接

扫一扫