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的都应该 ...
随机推荐
- centos+apache 2.x 开启gzip压缩
最近做了一个网站(PHP+Apache+MySQL),挂在百度云平台上面,基本配置是2G内存+5Mb带宽,每次打开主页都需要2-3s左右的时间,对于一个垂直搜索引擎来说,用户体验肯定会很差. 于是开始 ...
- vijos1034题解
题目: 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 规定:x和y是亲戚,y和z是亲戚,那么x和z也是亲戚.如果x,y是亲 ...
- EntityManager 实例化方法
Configure the EntityManager via a persistence.xml file <persistence xmlns="http://java.sun.c ...
- ISO18000-6B和ISO18000-6C(EPC C1G2)标准的区别
ISO18000-6B和ISO18000-6C(EPC C1G2)标准的区别 日期:2009-4-2 22:10:26 目前,有两个标准可供选择.一是ISO18000-6B,另一个是已被ISO接纳为I ...
- MongoDB数据库文档操作
前面的话 本文将详细介绍MongoDB数据库关于文档的增删改查 数据类型 在介绍文档操作之前,首先要了解MongoDB的数据类型 MongoDB支持许多数据类型,包括 1.字符串 - 这是用于存储数据 ...
- 支持苹果IPV6 ONLY 的socket 修改方法
首先别错误理解以为app 必须支持 ipv6 的服务端, 只需要支持 ipv6的客户端需要访问 ipv4 的服务端. 目前需要经过 NAT64 转换就能达到目的,客户端只需要支持该转换就能实现, 在 ...
- hdu_5964:平行四边形
打重现赛时,一点思路也没有,然后又看到这题AC数那么少,就直接放弃了.今天重新看了看,借鉴了下别人的,发现此题应该算是一道可解题. 看上去,这题的ans是同时有两个点作为自变量的函数(然而n^2复杂度 ...
- 【NOIP模拟】roads(最短路径转最小生成树)
题目背景 SOURCE:NOIP2016-RZZ-1 题目描述 有 N 个城市,这些城市通过 M 条无向边互相连通,每条边有一个权值 Ci ,表示这条边的长度为 2^(Ci) ,没有两条边的长度是相同 ...
- Java开源博客My-Blog(SpringBoot+Docker)系列文章
My Blog 1.Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦 2.My-Blog搭建过程:如何让一个网站从零到可以上线访问 3.将数据的初始化放到 ...
- KMP算法 --- 在文本中寻找目标字符串
KMP算法 --- 在文本中寻找目标字符串 很多时候,为了在大文本中寻找到自己需要的内容,往往需要搜索关键字.这其中就牵涉到字符串匹配的算法,通过接受文本和关键词参数来返回关键词在文本出现的位置.一般 ...