|
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>
| 
收藏
淘帖
踩
