get,post,jsonp数据交互—百度下拉列表
三种数据交互形式: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数据交互—百度下拉列表的更多相关文章
- vue教程1-09 交互 vue实现百度下拉列表
vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...
- JSONP -- 跨域数据交互协议
一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...
- HTML和JSON的数据交互-jsonp跨域
HTML和json的数据交互 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapi ...
- 分布式环境中,模块数据交互协议分析 (百度brpc)
1. 背景 之前听到同事说,要为自己的模块考虑写个数据协议.今天有空想了一下.写出来,方便后续使用. 开源代码brpc中可以支持多种协议,nshead.redis.mongo等20多种协议. 2. 什 ...
- Django学习笔记(8)——前后台数据交互实战(AJAX)
这里将自己这段时间学习的关于前后台数据交互的笔记写在这里,这里包含了Django传输数据给JS,AJAX的相关问题,跨域问题,如何解决AJAX的跨域问题等等.比较凌乱,请看到这篇博客的盆友见谅,如果我 ...
- ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝 ...
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
- ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...
- .net实现与excel的数据交互、导入导出
应该说,一套成熟的基于web的管理系统,与用户做好的excel表格进行数据交互是一个不可或缺的功能,毕竟,一切以方便客(jin)户(qian)为宗旨. 本人之前从事PHP的开发工作,熟悉PHP的都应该 ...
随机推荐
- 第二章:2.8 通过Django 在web页面上面输出 “Hello word ”
1. 第一步:配置 guest 目录下面的 settings.py 文件, 将 sign应用添加到 guest项目中. 2. 在 guest目录下面,打开 urls.py 文件,添加 要打开的路由文件 ...
- SQL语言-----数据操作
数据操作 增加数据,insert into 标准格式 insert into 表名 (字段的列表)value(数据列表): 使用set insert into 表名 set 字段1=值,2.....: ...
- Eclipse 修改 创建的Jsp的默认格式
Eclipse 的jsp模板修改 打开 eclipse 选择 Window -- Preferences
- mac下,mysql5.7.18连接出错,错误信息为:Access denied for user 'root'@'localhost' (using password: YES)
mac下,mysql5.7.18连接出错,错误信息为:Access denied for user 'root'@'localhost' (using password: YES)()里面的为shel ...
- HDU 5527---Too Rich(贪心+搜索)
题目链接 Problem Description You are a rich person, and you think your wallet is too heavy and full now. ...
- HashMap TreeMap ConcurrentHashMap 源码
1 HashMap java se 1.6 1.1 父类 java.lang.Object 继承者 java.util.AbstractMap<K,V> 继承者 java.util.Has ...
- 常用PHP函数
md5_file() 生成md5 $zip = new \ZipArchive(); if($zip->open($savepath.$key) === TRUE){ $zip ->ext ...
- (转)PL SQL Developer 使用总结
如果OS为windows 7 64位系统,Oracle版本为 Oracle 11g 64 安装PL SQL Developer 请参考 http://myskynet.blog.51cto.co ...
- AI人工智能-Python实现人机对话
[前言] AI 在人工智能进展的如火如荼的今天,我们如果不尝试去接触新鲜事物,马上就要被世界淘汰啦~ 本文拟使用Python开发语言实现类似于WIndows平台的“小娜”,或者是IOS下的“Siri” ...
- 全站 HTTPS 没你想象的那么简单
对自己无知这件事本身的无知真的挺可怕 认知偏差现象一直存在于我们每个人身上,谁也避免不掉,不过是有的人了解这件事儿,有的人不怎么知道而已,这就产生了「无知而不自知」的认知偏差.当然,这时候你自己忽悠自 ...