继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vue请求方式axios和axios.get

ajax入门学习视频
关注TA
已关注
手记 266
粉丝 80
获赞 597

         

    <!DOCTYPE html>    <html>        <head>            <meta charset="utf-8" />            <title>axios</title>        </head>        <script type="text/javascript" src="js/vue.js" ></script>        <script type="text/javascript" src="js/axios.min.js" ></script>        <script type="text/javascript" src="js/vue-resource.min.js" ></script>        <script>            window.onload = function(){                //配置是否允许检查代码,方便调试,生产环境中设置为false                Vue.config.devtools = true;  //检查代码                Vue.config.productioinTip = false;  //有强迫症的,可以关掉生产中的提示信息                new Vue({                    el:'#div1',                    data:{                        user:{                            name: 'lili',                            age:20                        }                    },                    methods:{                        send(){                            axios({                                method:'get',                                url:'user.json'                            }).then(function(res){                                console.log(res.data);                            }).catch(function(msg){                                console.log(msg.status);                            });                        },                        getSend(){                            axios.get('user.php',{                                params:{                                    name: '李四',                                    age: 19                                }                            }).then(res => {                                console.log(res.data);                            }).catch(err => {                                console.log('get请求失败:'+err.status+','+err.statusText);                            })                        },                        postSend(){                            axios.post('server.php',this.user,{                                transformRequest:[                                    function(data){                                        let params = '';                                        for(let index in data){                                            params += index+'='+data[index]+'&';                                        }                                        return params;                                    }                                ]                            }).then(resp => {                                console.log(resp.data);                            }).catch(err => {                                console.log('请求失败:'+err.status+','+err.statusText);                            })                        },                        jsonpSend(){                            this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{                                params:{                                    wd:'a' //百度的参数                                },                                jsonp: 'cb',//可以修改对方请求参数名称                            }).then(res => {                                console.log(res.data);                            })                        }                    }                })            }        </script>        <body>            <div id="div1">                <button @click="send">axios请求</button>                <button @click="getSend">get请求</button>                <button @click="postSend">post请求</button>                <button @click="jsonpSend">jsonp请求</button>            </div>        </body>    </html>
<?php    $name = $_GET['name'];    $age = $_GET['age'];    $msg =  '用户名:'.$name.',年龄:'.$age;    echo $msg;
<?php    $name = $_POST['name'];    $age = $_POST['age'];    $msg =  '用户名:'.$name.',年龄:'.$age;    echo $msg;


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP