get  post jsonp三种数据交互形式实例详解


Posted in Javascript onAugust 25, 2017

一、get请求

1.引入 vue.js 和 vue-resource.js , 准备一个按钮

<input type="button" value="按钮" @click="get()"/>  //点击按钮请求数据函数get()

2.准备一个txt文件

welcome vue

3.编写js代码

<script>
 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)


//失败后,弹出请求状态码
   })
   }
  }
  })
 }
 </script>

二、post请求

1.引入 vue.js 和 vue-resource.js , 准备一个按钮

<input type="button" value="按钮" @click="get()"/>

2.准备一个php文件

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



//回显数据相减结果
?>

3.编写js代码

<script>
 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)



 //失败后弹出状态码
   })
   }
  }
  })
 }
 </script>

三、jsonp——百度下拉列表实例

1.引入 vue.js 和 vue-resource.js , 准备基础样式代码

<style>
 .gray{
  background: #ccc;    //按上下键时显示的文字背景颜色
 }
 </style>
<div id="box">
 <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"/>



//按键传键值 get($event) 函数 //按向下键时 changeDown() 函数 //按向上键时 changeUp() 函数:阻止默认行为输入浮上移
 <ul>
  <li v-for="value in myData" :class="{gray:$index==now}">{{value}}</li>




//循环myData数据 绑定样式同时添加条件,下标值此时为几时,背景为灰
 </ul>
 <p v-show="myData.length==0">暂无数据...</p> //当数据长度为0时,显示暂无数据...
 </div>

  2、编写js代码

<script>
 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]







 //输入框值为此时数据中选中的值 
   }
  }
  })
 }
 </script>

  3、类似百度搜索了。。。

总结

以上所述是小编给大家介绍的三种数据交互形式get  post jsonp实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
jquery中this的使用说明
Sep 06 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 #Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 #Javascript
AngularJS select设置默认值的实现方法
Aug 25 #Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 #Javascript
node跨域请求方法小结
Aug 25 #Javascript
AngularJS中filter的使用实例详解
Aug 25 #Javascript
微信小程序实现表单校验功能
Mar 30 #Javascript
You might like
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP检测用户语言的方法
2015/06/15 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
js日历功能对象
2012/01/12 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
jQuery功能函数详解
2015/02/01 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
bootstrap Table的一些小操作
2017/11/01 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
Python的时间模块datetime详解
2017/04/17 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python字典排序的方法
2019/10/12 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
python collections模块的使用
2020/10/16 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
《忆江南》教学反思
2014/04/07 职场文书
2014年会计工作总结
2014/11/27 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2014年底个人工作总结
2015/03/10 职场文书
Python 键盘事件详解
2021/11/11 Python