Vue之交互

最新推荐文章于 2025-09-12 13:16:34 发布

weixin_30546189

最新推荐文章于 2025-09-12 13:16:34 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

文章标签： php json javascript ViewUI

原文链接：http://www.cnblogs.com/chaofei/p/7706828.html

本文介绍了Vue.js中四种常用的数据获取方法：get、带参数的get、post及jsonp，并提供了详细的代码实例。

1.get（）

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script src="vue-resource.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:'body',  
                data:{  
  
                },  
                methods:{  
                    get:function(){  
                        this.$http.get('a.txt').then(function(res){  
                            alert(res.data);  
                        },function(res){  
                            alert(res.data);  
                        });  
                    }  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <input type="button" value="按钮" @click="get()">  
</body>  
</html>

描述：

使用this.$http.get('数据来源的文件').then(function(res){

//成功

alert(res.data)//文件中的数据

},function(res){

//失败
alert(res.status);//返回状态：0

})

2.使用带参数的数据文件

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script src="vue-resource.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:'body',  
                data:{  
  
                },  
                methods:{  
                    get:function(){  
                        this.$http.get('get.php',{  
                            a:1,  
                            b:2  
                        }).then(function(res){  
                            alert(res.data);  
                        },function(res){  
                            alert(res.status);  
                        });  
                    }  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <input type="button" value="按钮" @click="get()">  
</body>  
</html>

get.php文件中

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

结果：

输出 3

3.使用post(带参数)

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script src="vue-resource.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:'body',  
                data:{  
  
                },  
                methods:{  
                    get:function(){  
                        this.$http.post('post.php',{  
                            a:1,  
                            b:20  
                        },{  
                            emulateJSON:true  
                        }).then(function(res){  
                            alert(res.data);  
                        },function(res){  
                            alert(res.status);  
                        });  
                    }  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <input type="button" value="按钮" @click="get()">  
</body>  
</html>

描述：

emulateJSON:true

如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。

启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。

4.使用jsonp

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script src="vue-resource.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:'body',  
                data:{  
  
                },  
                methods:{  
                    get:function(){  
                        this.$http.jsonp('https://sug.so.360.cn/suggest',{  
                            word:'a'  
                        }).then(function(res){  
                            alert(res.data.s);  
                        },function(res){  
                            alert(res.status);  
                        });  
                    }  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <input type="button" value="按钮" @click="get()">  
</body>  
</html>