vue $http请求服务

最新推荐文章于 2025-02-16 09:00:00 发布

转载最新推荐文章于 2025-02-16 09:00:00 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #php #json #ViewUI

本文介绍了如何在Vue项目中引入并使用$http服务，包括通过vue-resource实现GET和POST请求的方法，并提供了完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/qq_36947128/article/details/72832977

转载于:https://www.cnblogs.com/fps2tao/p/9378799.html