Vue前后台交互

一直在文档什么的看到的都是静态页面的制作，终于搞明白怎么做交互了。1. 引入vue.js, vue-resource.js;2.这就可以开始交互了。注意：一定要运行在服务器里面，否则输出的是php代码，而非返回值。有三种交互方式：get、post、jsonpget：会将请求的参数附在最后post：不会显示在url中get、post用来请求某个php文件的参数。jso

翎羽飘

9272人浏览 · 2017-07-11 11:47:45

翎羽飘 · 2017-07-11 11:47:45 发布

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

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^