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中document对象使用详解
Jan 06 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 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 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
[01:46]新英雄登场
2019/09/10 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
python中as用法实例分析
2015/04/30 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
python单元测试unittest实例详解
2015/05/11 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
企业统计员岗位职责
2013/12/13 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
银行内勤岗位职责
2014/04/09 职场文书
宣传工作经验材料
2014/06/02 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
Linux中各个目录的作用与内容
2022/06/28 Servers