zoukankan      html  css  js  c++  java
  • vue教程1-08 交互 get、post、jsonp

    vue教程1-08 交互 get、post、jsonp

    一、如果vue想做交互,引入: vue-resouce

    二、get方式

    1、get获取一个普通文本数据:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <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.status);//成功
                                alert(res.data);
                            },function(res){
                                alert(res.status);//失败返回
                                alert(res.data);
                            });
                        }
                    }
                });
            };
        </script>
    </head>
    <body>
        <input type="button" value="按钮" @click="get()">
    </body>
    </html>

    2、get给服务发送数据:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <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>

    二、post方式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <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>

    四、jsonp方式

    获取百度接口

    查看响应数据

    jsonp请求百度接口

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <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://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                                wd:'a'
                            },{
                                jsonp:'cb'//回调函数名称
                            }).then(function(res){
                                alert(res.data.s);
                            },function(res){
                                alert(res.status);
                            });
                        }
                    }
                });
            };
        </script>
    </head>
    <body>
        <input type="button" value="按钮" @click="get()">
    </body>
    </html>

    jsonp请求360接口

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <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>
  • 相关阅读:
    Jquery 面板导航,切换效果
    Jquery闪耀的地方,dom遍历,过滤查找的例子
    Jquery 通过 data- 来实现按钮点击切换显示隐藏
    Bootstrap 点击按钮切换内容
    c语言快速学习
    嵌入式学习
    16_文件的操作
    06_指针
    11_函数的退出方式
    10_参数数量可变的函数及命令行参数
  • 原文地址:https://www.cnblogs.com/baiyangyuanzi/p/6768465.html
Copyright © 2011-2022 走看看