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 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
AngularJs 常用的过滤器
May 15 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
vue-cli设置css不生效的解决方法
Feb 07 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 类相关函数的使用详解
2013/05/10 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
js获取视频时长代码
2014/04/10 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
python搜索指定目录的方法
2015/04/29 Python
python2 与python3的print区别小结
2018/01/16 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
python算法题 链表反转详解
2019/07/02 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
python实现双人五子棋(终端版)
2020/12/30 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
英国团购网站:Groupon英国
2017/11/28 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
城市规划毕业生求职信
2013/10/10 职场文书
个人银行贷款担保书
2014/04/01 职场文书
个人德育工作总结
2015/03/05 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
黄埔军校观后感
2015/06/10 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
springboot入门 之profile设置方式
2022/04/04 Java/Android