时间:2021-05-26
本文实例讲述了vue基础之使用get、post、jsonp实现交互功能。分享给大家供大家参考,具体如下:
一、如果vue想做交互,引入: vue-resouce
二、get方式
1、get获取一个普通文本数据:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.get('a.txt').then(function(res){ alert(res.status);//成功 alert(res.data); },function(res){ alert(res.status);//失败返回 alert(res.data); }); } } }); }; </script></head><body> <input type="button" value="按钮" @click="get()"></body></html>2、get给服务发送数据:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.get('get.php',{ a:1, b:2 }).then(function(res){ alert(res.data); },function(res){ alert(res.status); }); } } }); }; </script></head><body> <input type="button" value="按钮" @click="get()"></body></html>三、post方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.post('post.php',{ a:1, b:20 },{ emulateJSON:true }).then(function(res){ alert(res.data); },function(res){ alert(res.status); }); } } }); }; </script></head><body> <input type="button" value="按钮" @click="get()"></body></html>四、jsonp方式
获取百度接口
查看响应数据
jsonp请求百度接口
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ new Vue({ el:'body', 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> <input type="button" value="按钮" @click="get()"></body></html>jsonp请求360接口
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.jsonp('https://sug.so.360.cn/suggest',{ word:'a' }).then(function(res){ alert(res.data.s); },function(res){ alert(res.status); }); } } }); }; </script></head><body> <input type="button" value="按钮" @click="get()"></body></html>感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
jquery框架中提供了$.ajax、$.get、$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get示例:实现省市区
vue-cli3跨域配置:在vue-resource的数据请求中,一般我们会将请求方式GET/POST修改为jsonp的请求方式就可以实现跨域。但是对于只支持G
vue中的交互(ajax,jsonp)vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是他本身框架当中没有这样的方法,需要一个新的小东西
Django中request.get和request.post的区别POST和GET差异:POST和GET是HTTP协议定义的与服务器交互的方法。GET一般用于
本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下:axios中文文档 https://github.com/m