vue交互 | 易学教程

交互:（vue.js v1.0.21 vue-resource.js v0.7.0）
    $http    （ajax）

    如果vue想做交互

    引入: vue-resouce

    get:
        获取一个普通文本数据:
        this.$http.get('aa.txt').then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
        给服务发送数据:√
        this.$http.get('get.php',{
            a:1,
            b:2
        }).then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
    post:
        this.$http.post('post.php',{
            a:1,
            b:20
        },{
            emulateJSON:true
        }).then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
    jsonp:
        https://sug.so.360.cn/suggest?callback=suggest_so&word=a

        https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
            wd:'a'
        },{
            jsonp:'cb'    //callback名字，默认名字就是"callback"
        }).then(function(res){
            alert(res.data.s);
        },function(res){
            alert(res.status);
        });

get实例（html）：

<!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">
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" @click="get()">
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/vue-resource0.7.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.get('http://localhost:8088/workSpace/data/get.php',{
                            a:1,
                            b:2
                        }).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;
?>

post实例（html）：

<!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">
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" @click="get()">
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.post('http://localhost:8088/workSpace/data/post.php',{
                            a:1,
                            b:20
                        },{
                            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;
?>

jsonp实例（html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</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="js/vue.js"></script>
    <script src="js/vue-resource0.7.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                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>
    <div id="box">
        <input type="button" value="按钮" @click="get()">
    </div>
</body>
</html>

来源：https://www.cnblogs.com/theWayToAce/p/7243101.html

标签

alert