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的数据交互(集合. ...
随机推荐
- Remmarguts' Date(POJ2449+最短路+A*算法)
题目链接:http://poj.org/problem?id=2449 题目: 题意:求有向图两点间的k短路. 思路:最短路+A*算法 代码实现如下: #include <set> #in ...
- LCA入门题集小结
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2586 题目: How far away ? Time Limit: 2000/1000 MS (Jav ...
- idea ssm框架搭建
1.分享一篇完整的ssm框架搭建连接 大牛博客:https://www.cnblogs.com/toutou/p/ssm_spring.html#_nav_0 2.我的搭建的完整项目连接,可以进入我的 ...
- bzoj 2440 dfs序
首先我们可以做一遍dfs,用一个队列记录每个点进出的顺序,当每个点访问的时候que[tot++]=x,记为in[x],当结束dfs的时候que[tot++]=x,记为out[x],这样处理出来的队列, ...
- Python作业模拟登陆(第一周)
模拟登陆:1. 用户输入帐号密码进行登陆2. 用户信息保存在文件内3. 用户密码输入错误三次后锁定用户 思路: 1. 用户名密码文件为passwd,锁定用户文件为lock 2. 用户输入账号密码采用i ...
- Android中的异常情况
1.setText()方法中,如果参数是int类型,Android会把它当做是一个id查找,报以下异常,因此解决办法就是将参数转化为String类型 如:setText(num) è setText( ...
- 随机森林(Random Forest)详解(转)
来源: Poll的笔记 cnblogs.com/maybe2030/p/4585705.html 1 什么是随机森林? 作为新兴起的.高度灵活的一种机器学习算法,随机森林(Random Fores ...
- [Leetcode Week15] Add Two Numbers
Add Two Numbers 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/add-two-numbers/description/ Descrip ...
- python实战===老司机奇技淫巧系列之字符转换成图片
先放两张效果图:
- WordPress个人博客搭建
搭建LNMP环境 请参考前面的博文自行搭建 部署WordPress #创建数据库和用户 mysql -uroot -p123456 -S /data/3306/mysql.sock create da ...