JSON APIs and Ajax
1.
通过jQuery来绑定点击事件。
函数 $(document).ready()
这个函数中的代码只会在我们的页面加载时候运行一次,确保执行js之前页面所有的dom已经准备就绪。
在$(document).ready()
函数中增加一个click
事件。代码如下:
$("#getMessage").on("click", function(){
});
2.
当你需要根据服务器返回的数据来动态改变页面的时候,应用程序接口(API)就派上用场了。
记住,API——应用程序接口(Application Programming Interface)是计算机之间相互交流沟通的工具。
许多网站的应用程序接口(API)都是通过一种称为JSON格式的数据来传输的,JSON 是 JavaScript Object Notation的简写。
其实如果你曾经创建过JS对象的话,你就已经使用了这种数据格式,JSON是一种非常简洁的数据格式。
它通常表现为了两种形式,一种为单个对象,一种为多个对象
单个对象类似于:{name:'盖伦',advantage:'单挑无敌'}
多个对象类似于:[{name:'盖伦',advantage:'单挑无敌'},{name:'诺克',advantage:'上单霸主'}]
每个对象属性和属性值的组合就是我们经常听到的"键值对(key-value pairs)"。
让我们从之前的猫图API拿取数据吧。
你应该在你的点击事件中加入如下的代码:
$.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
显示结果:[{"id":0,"imageLink":"/images/funny-cat.jpg","codeNames":["Juggernaut","Mrs. Wallace","Buttercup"]},{"id":1,"imageLink":"/images/grumpy-cat.jpg","codeNames":["Oscar","Scrooge","Tyrion"]},{"id":2,"imageLink":"/images/mischievous-cat.jpg","codeNames":["The Doctor","Loki","Joker"]}]
3.
已经从JSON API中获得了数据,现在把它们展现到我们的HTML页面中吧。
这里,我们使用.forEach()
函数来循环遍历JSON数据写到htmll变量中。
首先我们定义一个HTML变量,var html = "";
。
然后,我们使用.forEach()
函数来循环遍历JSON数据写到html变量中,最后把html变量显示到我们的页面中。
整个过程的代码如下:
json.forEach(function(val) {
var keys = Object.keys(val);
html += "<div class = 'cat'>";
keys.forEach(function(key) {
html += "<b>" + key + "</b>: " + val[key] + "<br>";
});
html += "</div><br>";
});
显示结果:
id:0
imageLink:/images/funny-cat.jpg
codeNames:Juggernaut,Mrs. Wallace,Buttercup
id:1
imageLink:/images/grumpy-cat.jpg
codeNames:Oscar,Scrooge,Tyrion
id:2
imageLink:/images/mischievous-cat.jpg
codeNames:The Doctor,Loki,Joker
4.
从上节课获得的JSON数组中,每个对象都包含了一个以imageLink
为键(key),以猫的图片的url为值(value)的键值对。
当我们在遍历这些对象时,我们用imageLink
的属性来显示img
元素的图片。
代码如下:
html += "<img src = '" + val.imageLink + "'>";
5.
如果我们不想把所有从JSON API中得到的图片都展现出来,我们可以在遍历之前做一次过滤。
我们把其中 "id" 键的值为1的图片过滤掉。
代码如下:
json = json.filter(function(val) {
return (val.id !== 1);
});
6.
我们还可以通过浏览器navigator
获得我们当前所在的位置geolocation
。
位置的信息包括经度longitude
和纬度latitude
。
你将会看到一个是否允许获取当前位置的提示。不管你选择允许或者禁止,只要代码正确,这关就能过了。
如果你选择允许,你将会看到右侧手机输出的文字为你当前所在位置的经纬度。
代码如下:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
JSON APIs and Ajax的更多相关文章
- JSON.stringify实例应用—将对象转换成JSON类型进行AJAX异步传值
在上一篇中,对JSON.stringify()方法有了初步的认识,并且做了一些简单的例子.本篇将进一步将JSON.stringify用在复杂些的实例中,例如如下需求: 在进jQuery AJAX异步传 ...
- Learning Scrapy笔记(六)- Scrapy处理JSON API和AJAX页面
摘要:介绍了使用Scrapy处理JSON API和AJAX页面的方法 有时候,你会发现你要爬取的页面并不存在HTML源码,譬如,在浏览器打开http://localhost:9312/static/, ...
- Struts2之—集成Json插件实现Ajax
上篇博客介绍了Struts2中自己定义结果集实现Ajax,也分析了它的缺点:这样自己定义的结果集,写死了,不能做到client须要什么数据就传什么数据:Struts2之-自己定义结果集实现aja ...
- echo json数据给ajax后, 需要加上exit,防止往下执行,带上其他数据,到时ajax失败
01返回json数据给ajax后需要加上exit.返回json数据前不能有其他输出 function apply(){ if(IS_POST){$info['status'] = 1; echo js ...
- SpringMVC 实现返回一段数据 & 实现自动发送json格式数据 - AJAX
实现返回一段数据 - AJAX 当页面通过AJAX来访问Controller时,期望得到的不是一个页面而是一段数据,此时可以使用如下方法,直接向相应中写入数据: /** * 直接向响应中写出数据,通常 ...
- js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可)
js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...
- Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据
前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...
- 如何在Crystal Portlet中正确返回JSON数据给AJAX请求?
当Crystal Portlet中需要采用Ajax请求,并让后台返回Json数据时,如何才能正确.方便的返回Json数据呢? 以下两种方法均可: 方法一:Ajax请求时,采用RenderURL,对应P ...
- json传值以及ajax接收
一开始进入公司,做起项目来比较不知所措,现在一个月过去了,越来越得心应手,下面是json向前端传值以及前端ajax接收,给自己记下也分享给大家. 这是两个类型不同的json与ajax的数据交互(集合. ...
随机推荐
- 深入HBase架构解析(一)
前记 公司内部使用的是MapR版本的Hadoop生态系统,因而从MapR的官网看到了这篇文文章:An In-Depth Look at the HBase Architecture,原本想翻译全文,然 ...
- Ubuntu12.04 安装LAMP及phpmyadmin
1.安装 Apache apt-get install apache2 2.安装 PHP5 apt-get install php5 libapache2-mod-php5 3.安装 MySQL ap ...
- 解决Sourcetree 每次拉取提交都需要输入密码
问题产生背景 客户端领导决定使用http方式拉取和push代码,所以无法使用之前的ssh方式做免密处理 解决办法 方法1:在.git目录中有个config目录,在路径前配置下用户名和密码即可,如下所示 ...
- redis的安装和常用命令
一.redis的安装 1.windows安装redis 下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 位.这 ...
- mysql not null default / default
not null default 说明不能是NULL, 并设置默认值 default 设置默认值 , 但值也可能是NULL mysql> create table test (id int, n ...
- Python学习笔记 - day13 - 进程与线程
概述 我们都知道windows是支持多任务的操作系统. 什么叫“多任务”呢?简单地说,就是操作系统可以同时运行多个任务.打个比方,你一边在用浏览器上网,一边在听MP3,一边在用Word赶作业,这就是多 ...
- Microsoft Security Essential: 微软安全软件
Microsoft Security Essential: 微软安全软件 这个杀毒软件终身免费
- js中常用的数组方法
在数组的尾部增加或删除某个元素:push() 和 pop() push() : 在数组的尾部追加一个或多个元素,并返回数组的长度 pop():在数组的尾部删除一个元素,并返回被删除项 var arr ...
- 在 static table view 中增加date picker 并进行动态高度设定
http://blog.apoorvmote.com/how-to-pop-up-datepicker-inside-static-cells/
- Name Disambiguation in AMiner-Clustering, Maintenance, and Human in the Loop
Name Disambiguation in AMiner: Clustering, Maintenance, and Human in the Loop paper:http://keg.cs.ts ...