三种数据交互形式:get  post jsonp

一、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数据交互—百度下拉列表的更多相关文章

  1. vue教程1-09 交互 vue实现百度下拉列表

    vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. JSONP -- 跨域数据交互协议

    一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...

  3. HTML和JSON的数据交互-jsonp跨域

    HTML和json的数据交互 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapi ...

  4. 分布式环境中,模块数据交互协议分析 (百度brpc)

    1. 背景 之前听到同事说,要为自己的模块考虑写个数据协议.今天有空想了一下.写出来,方便后续使用. 开源代码brpc中可以支持多种协议,nshead.redis.mongo等20多种协议. 2. 什 ...

  5. Django学习笔记(8)——前后台数据交互实战(AJAX)

    这里将自己这段时间学习的关于前后台数据交互的笔记写在这里,这里包含了Django传输数据给JS,AJAX的相关问题,跨域问题,如何解决AJAX的跨域问题等等.比较凌乱,请看到这篇博客的盆友见谅,如果我 ...

  6. ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝 ...

  7. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

  8. ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...

  9. .net实现与excel的数据交互、导入导出

    应该说,一套成熟的基于web的管理系统,与用户做好的excel表格进行数据交互是一个不可或缺的功能,毕竟,一切以方便客(jin)户(qian)为宗旨. 本人之前从事PHP的开发工作,熟悉PHP的都应该 ...

随机推荐

  1. vijos1760题解

    题目: 现在有n个人,题目给出了他们每个人所在市县的编号.他们站在一个从左向右的队伍中.小L不在队列中.他想找到一个长度不超过D的区域,使他能够找到最多的不同地方的朋友.要求输出能找到的朋友所在不同市 ...

  2. Jmeter之分布式测试

    1)Jmeter 是纯java 应用,对于CPU和内存的消耗比较大,并且受到JVM的一些限制: 一般情况下,依据机器配置,单机的发压量为300-600,因此,当需要模拟数以千计的并发用户时,使用单台机 ...

  3. Bootstrap提示框

    前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是 ...

  4. updateByPrimaryKey和updateByPrimaryKeySelective insert和insertSelective

    这两个update都是使用generator生成的mapper.xml文件中,对dao层的更新操作 updateByPrimaryKey对你注入的字段全部更新(不判断是否为Null) updateBy ...

  5. web.xml is missing and <failOnMissingWebXml> is se

    摘要 maven模块化 在学习maven模块化构建项目的时候遇到了如下报错信息: web.xml is missing and <failOnMissingWebXml> is set t ...

  6. SQL Server 2008R2的安装

    一.安装前的准备工作:SQL Server 200R2安装包 二.SQL Server2008R2的安装 1.打开SQL Server2008R2的安装包,找到setup.exe 2.双击sql se ...

  7. Mac终端查看sqlite3数据库、表数据等

    背景: 我们在用FMDB处理iOS数据库时,沙盒里保存的数据库格式为.sqlite3. 当我们需要在模拟器上调试或查看数据库内容时,我们可以直接在终端里查看到. 正文: 1.在沙盒路径找到需要查看到文 ...

  8. php工作两年了。。。

    对于一个快要毕业的人来说,我相信大部分人都是迷茫的,我也一样但是迷茫的一塌糊涂完全不知道以后自己能干什么. 2014年底,某某培训机构来到学校进行招生.反正在对方的一阵忽悠之下我是蠢蠢欲动,但是当时的 ...

  9. luogu P1361 小猫爬山 [iddfs]

    题目描述 WD和LHX饲养了N只小猫,这天,小猫们要去爬山.经历了千辛万苦,小猫们终于爬上了山顶,但是疲倦的它们再也不想徒步走下山了. WD和LHX只好花钱让它们坐索道下山.索道上的缆车最大承重量为W ...

  10. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...