一、get请求
1.引入 vue.js 和 vue-resource.js,准备一个按钮
函数get()
2.准备一个txt文件
3.编写js代码
window.onload=function(){
new Vue({
el:'body',//主体为body，有套div时，此处为选择器
methods:{
get:function(){
this.$http.get('a.txt').then(function(res){
alert(res.data) //成功后，弹出请求数据
},function(res){
alert(res.status) //失败后，弹出请求状态码
})
}
}
})
}
二、post请求
1.引入 vue.js 和 vue-resource.js,准备一个按钮
3.编写js代码
window.onload=function(){
new Vue({
el:'body',methods:{
get:function(){
this.$http.post('post.PHP',{ //发送实参数据，进行运算（需要放在服务器环境）
a:1,b:2
},{
emulateJSON:true //post的标识
}).then(function(res){
alert(res.data) //成功后弹出数据结果
},function(res){
alert(res.status) //失败后弹出状态码
})
}
}
})
}
三、jsonp——百度下拉列表实例
1.引入 vue.js 和 vue-resource.js,准备基础样式代码
2、编写js代码
window.onload=function(){
new Vue({
el:'#Box',data:{
myData:[],t1:'',now:-1
},methods:{
get:function(ev){ //接收事件
if(ev.keyCode==38||ev.keyCode==40)return; //如果事件为向上向下则return不请求数据
if(ev.keyCode==13){ //如果事件为回车
window.open('https://www.baidu.com/s?wd='+this.t1); //则打开百度对应t1值页面
this.t1=''; //清空输入框
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1 //截取的搜索接口，发送数据为输入框此时输入的数据
},{
jsonp:'cb' //callback名字，默认为'callback'
}).then(function(res){
this.myData=res.data.s //将数据的s值赋给 myData
},function(res){
alert(res.status)
})
},changeDown:function(){ //按下键时的函数
this.now++; //now下标值++
if(this.now==this.myData.length)this.now=-1; //如果下标值为数据长度，即最后一个时，为-1，跳到第一个
this.t1=this.myData[this.now] //输入框值为此时数据中选中的值
},changeUp:function(){ //按上键时的函数
this.now--; //now下标值--
if(this.now==-2)this.now=this.myData.length-1 //如果下标值为-2，此时now=总长度-1，跳到最后一个
this.t1=this.myData[this.now] //输入框值为此时数据中选中的值
}
}
})
}
总结
以上所述是小编给大家介绍的三种数据交互形式get post jsonp实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/36832.html