一直在文档什么的看到的都是静态页面的制作,终于搞明白怎么做交互了。

1. 引入vue.js, vue-resource.js;

2.这就可以开始交互了。

注意:一定要运行在服务器里面,否则输出的是php代码,而非返回值。

有三种交互方式:get、post、jsonp

get:会将请求的参数附在最后

post:不会显示在url中

get、post用来请求某个php文件的参数。

jsonp:JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。其核心思想是利用JS标签里面的跨域特性进行跨域数据访问,在JS标签里面存在的是一个跨域的URL,实际执行的时候通过这个URL获得一段字符串,这段返回的字符串必须是一个合法的JS调用,通过EVAL这个字符串来完成对获得的数据的处理。

定义a.txt

内容是:Hello world!

1)get:

php接口:

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

vue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-get</title>
    <script src="vue.js"></script>
    <script src="vue-resource.js"></script>
</head>
<body>
    <div id="app">
        a= <input type="text" id="t1" v-model="t1">
        b= <input type="text" id="t2" v-model="t2">
        a+b=<span class="a">{{msg}}</span>
        <input type="button" value="submit" @click="get()">
    </div>

    <script>
        new Vue({
            el:'body',
            data:{
                t1:'',
                t2:'',
                msg:''
            },
            methods:{
                get:function(){
                    this.$http.get('get.php',{
                         a:this.t1,
                         b:this.t2
                    }).then(function(res){
                       this.msg=res.data;
                    },function(res){
                        alert(res.status);
                    });
                }
            }
        });
    </script>
</body>
</html>


2)  post:

php接口:

<?php
$a=$_POST['a'];
$b=$_POST['b'];
echo $a-$b;
?>

vue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-post</title>
    <script src="vue.js"></script>
    <script src="vue-resource.js"></script>
</head>
<body>
<div id="app">
    a= <input type="text" id="t1" v-model="t1">
    b=<input type="text" id="t2" v-model="t2">
    a-b=<span class="a">{{msg}}</span>
    <input type="button" value="submit" @click="post()">
</div>

<script>
    new Vue({
        el:'body',
        data:{
            t1:'',
            t2:'',
            msg:''
        },
        methods:{
            post:function(){
                this.$http.post('post.php',{
                    a:this.t1,
                    b:this.t2
                },{
                    emulateJSON:true
                }).then(function(res){
                    this.msg=res.data;
                },function(res){
                    alert(res.status);
                });
            }
        }
    });
</script>
</body>
</html>


3)  JOSNP:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="vue.js"></script>
    <script src="vue-resource.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" id="t1" v-model="t1">
        <p class="a">{{msg1}}</p>
        <input type="button" value="submit" @click="get()">
    </div>
    <script>
        new Vue ({
            el:'#app',
            data:{
                t1:'',
                msg1:''
            },
            methods:{
                get:function(){
                    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                        wd:this.t1
                    },{
                        jsonp:'cb'	//callback名字,默认名字就是"callback"
                    }).then(function(res){
                       this.msg1=res.data.s;
                    },function(res){
                        alert(res.status);
                    });
                }
            }
        });

    </script>
</body>
</html>

最传统的写法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="vue.js"></script>
    <script src="vue-resource.js"></script>
</head>
<body>
<div id="app">
    <input type="text" id="t1" v-model="t1">
    <p class="a">{{msg1}}</p>
    <input type="button" value="submit" @click="get()">
</div>
<script>
    new Vue ({
        el:'#app',
        data:{
            t1:'a',
            msg1:'b'
        },
        methods:{
            get:function(){
                this.$http({
                    url:'post.php'
                    data:给后台提交数据,
                    method:'get'//也可以是/post/jsonp
                    //如果是jsonp,那么还要加一行:jsonp:'cb' //cbName
                }).then(function(res){
                    this.msg1=res.data.s;
                },function(res){
                    alert(res.status);
                });
            }
        }
    });

</script>
</body>
</html>


Logo

前往低代码交流专区

更多推荐