三种数据交互形式: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. 第二章:2.8 通过Django 在web页面上面输出 “Hello word ”

    1. 第一步:配置 guest 目录下面的 settings.py 文件, 将 sign应用添加到 guest项目中. 2. 在 guest目录下面,打开 urls.py 文件,添加 要打开的路由文件 ...

  2. SQL语言-----数据操作

    数据操作 增加数据,insert into 标准格式 insert into 表名 (字段的列表)value(数据列表): 使用set insert into 表名 set 字段1=值,2.....: ...

  3. Eclipse 修改 创建的Jsp的默认格式

    Eclipse 的jsp模板修改 打开 eclipse  选择 Window -- Preferences

  4. 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 ...

  5. HDU 5527---Too Rich(贪心+搜索)

    题目链接 Problem Description You are a rich person, and you think your wallet is too heavy and full now. ...

  6. HashMap TreeMap ConcurrentHashMap 源码

    1 HashMap java se 1.6 1.1 父类 java.lang.Object 继承者 java.util.AbstractMap<K,V> 继承者 java.util.Has ...

  7. 常用PHP函数

    md5_file() 生成md5 $zip = new \ZipArchive(); if($zip->open($savepath.$key) === TRUE){ $zip ->ext ...

  8. (转)PL SQL Developer 使用总结

    如果OS为windows 7 64位系统,Oracle版本为 Oracle 11g 64 安装PL SQL Developer 请参考    http://myskynet.blog.51cto.co ...

  9. AI人工智能-Python实现人机对话

    [前言] AI 在人工智能进展的如火如荼的今天,我们如果不尝试去接触新鲜事物,马上就要被世界淘汰啦~ 本文拟使用Python开发语言实现类似于WIndows平台的“小娜”,或者是IOS下的“Siri” ...

  10. 全站 HTTPS 没你想象的那么简单

    对自己无知这件事本身的无知真的挺可怕 认知偏差现象一直存在于我们每个人身上,谁也避免不掉,不过是有的人了解这件事儿,有的人不怎么知道而已,这就产生了「无知而不自知」的认知偏差.当然,这时候你自己忽悠自 ...