json apis and ajax,FreeCodeCamp - JSON APIs and Ajax
FreeCodeCamp - JSON APIs and Ajax
Trigger Click Events with jQuery
通过jQuery来绑定点击事件。
首先,我们来看一下函数 $(document).ready() 干了些什么。
这个函数中的代码只会在我们的页面加载时候运行一次,确保执行js之前页面所有的dom已经准备就绪。
任务:给"Get Message"按钮绑定一个点击事件。
我们先在$(document).ready()函数中增加一个click事件。代码如下:$(document).ready()function by adding this code:
$("#getMessage").on("click", function(){
});
$(document).ready(function() {
// Only change code below this line.
$("#getMessage").on("click",function() {});
// Only change code above this line.
});
Cat Photo Finder
The message will go here
Get Message
Change Text with Click Events
通过点击事件来更改文本。
当我们点击按钮时,我们可以更新HTML页面
任务:点击"Get Message"按钮,将class为message 的元素的文本改为:“Here is the message”。
为此在我们的点击事件中加入如下代码:
$(".message").html("Here is the message");
$(document).ready(function() {
$("#getMessage").on("click", function(){
// Only change code below this line.
$(".message").html("Here is the message");
// Only change code above this line.
});
});
Cat Photo Finder
The message will go here
Get Message
Get JSON with the jQuery getJSON Method
当你需要根据服务器返回的数据来动态改变页面的时候,应用程序接口(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));
});
在这之后,点击"Get Message"按钮。你的Ajax函数将把文字"The message will go here"替换成此从FreeCodeCam的猫图API中获得的原始JSON数据。
$(document).ready(function() {
$("#getMessage").on("click", function(){
// Only change code below this line.
$.getJSON("/json/cats.json",function(json) {
$(".message").html(JSON.stringify(json));
});
// Only change code above this line.
});
});
Cat Photo Finder
The message will go here
Get Message
Convert JSON Data to HTML
好了,我们已经从JSON API中获得了数据,现在把它们展现到我们的HTML页面中吧。
这里,我们使用.forEach()函数来循环遍历JSON数据写到htmll变量中。
首先我们定义一个HTML变量,
var html = ""; 。
然后,我们使用.forEach()函数来循环遍历JSON数据写到html变量中,最后把html变量显示到我们的页面中。
整个过程的代码如下:
json.forEach(function(val) {
var keys = Object.keys(val);
html += "
keys.forEach(function(key) {
html += "" + key + ": " + val[key] + "
";
});
html += "
";
});
提示:示例中难点在于两个forEach循环,而且里面夹杂有字符串拼接,这是最头疼也最容易出错的地方。
$(document).ready(function() {
$("#getMessage").on("click", function() {
$.getJSON("/json/cats.json", function(json) {
var html = "";
// Only change code below this line.
json.forEach(function(val) {
var keys = Object.keys(val);
html += "
keys.forEach(function(key) {
html += "" + key + ": " + val[key] + "
";
});
html += "
";
});
// Only change code above this line.
$(".message").html(html);
});
});
});
Cat Photo Finder
The message will go here
Get Message
显示是这样的。
Render Images from Data Sources
从上节课获得的JSON数组中,每个对象都包含了一个以imageLink为键(key),以猫的图片的url为值(value)的键值对。
当我们在遍历这些对象时,我们用imageLink的属性来显示img元素的图片。
代码如下:
html += "";
$(document).ready(function() {
$("#getMessage").on("click", function() {
$.getJSON("/json/cats.json", function(json) {
var html = "";
json.forEach(function(val) {
html += "
// Only change code below this line.
html += ""
// Only change code above this line.
html += "
";
});
$(".message").html(html);
});
});
});
Cat Photo Finder
The message will go here
Get Message
Prefilter JSON
如果我们不想把所有从JSON API中得到的图片都展现出来,我们可以在遍历之前做一次过滤。
我们把其中 "id" 键的值为1的图片过滤掉。
代码如下:
json = json.filter(function(val) {
return (val.id !== 1);
});
$(document).ready(function() {
$("#getMessage").on("click", function() {
$.getJSON("/json/cats.json", function(json) {
var html = "";
// Only change code below this line.
json = json.filter(function(val) {
return (val.id !== 1);
})
// Only change code above this line.
json.forEach(function(val) {
html += "
html += ""
html += "
"
});
$(".message").html(html);
});
});
});
Cat Photo Finder
The message will go here
Get Message
Get Geolocation Data
我们还可以通过浏览器navigator获得我们当前所在的位置geolocation。
位置的信息包括经度longitude和纬度latitude。
你将会看到一个是否允许获取当前位置的提示。不管你选择允许或者禁止,只要代码正确,这关就能过了。
如果你选择允许,你将会看到右侧手机输出的文字为你当前所在位置的经纬度。
代码如下:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "
longitude: " + position.coords.longitude);
});
}
// Only change code below this line.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "
longitude: " + position.coords.longitude);
});
}
// Only change code above this line.
You are here:
效果如上。
(完)
json apis and ajax,FreeCodeCamp - JSON APIs and Ajax相关推荐
- ajax调取json接口,通过 Ajax 调取后台接口将返回的 json 数据绑定在页面上
第一步: 编写基础的 html 框架内容,并引入 jquery: 测试Ajax 第二步: 在 " " 中间插入要点击的按钮和用来显示数据的 标签,并编写对应的 function: ...
- AngularJS学习笔记(3)——通过Ajax获取JSON数据
通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
- Ajax与JSON的一些总结(转)
1.1.1 摘要 Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现.虽然名字中包含XML,但Ajax ...
- ajax请求json和xml数据及对json和xml格式数据的解析
ajax请求json和xml数据及对json和xml格式数据的解析 一.ajax请求json数据并解析 ajax的写法: json数据解析: 请求json经常出现的跨域报错: 二.ajax请求xml数 ...
- api ajax解析json数据库,api ajax解析json数据库
api ajax解析json数据库 内容精选 换一换 华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务 ...
- boke例子: freermarker:在使用ajax传递json数据的时候多出冒号
boke例子: freermarker:在使用ajax传递json数据的时候多出冒号 json数据是用JSON.stringify()格式化的数据,然后用ajax传递,发现数据多出一个冒号:, 后来度 ...
- ajax交互json数据
2019独角兽企业重金招聘Python工程师标准>>> html 代码**粗体** <!DOCTYPE html> <html><head>< ...
- id jquery 拼接_jquery拼接ajax的json和字符串的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,本文主要介绍了jquery拼接ajax 的json和字符串拼接的方法,这里整理了详细的代码,有需要的小伙伴可以参考下. jQ ...
- ajax学习----json,前后端交互,ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
最新文章
- mysql 学习笔记(二)
- Resolving Problems installing the Java JCE Unlimited Strength Jurisdiction Policy Files package--转
- 【Python】Time库的使用(含实例)
- JAVA开发面试常问问题总结1
- CentOS 5.5 安装配置全攻略 (无线上网 更新源 显卡驱动 firefox3.6 flash插件 编译boost1.43.0 雅黑字体...
- socket接口多线程数据传输
- 以4%参数量比肩GPT-3!Deepmind 发布检索型 LM,或将成为 LM 发展新趋势!?
- 测试学习——全链路压测
- 【Electronics】数字电路实验——交通灯设计
- 大数据分析项目实例:Hadoop数据分析应用场景
- 手气不错 跳过搜索 谷歌 Google
- 玩客云刷入armbian系统总结
- 壞壞老婆VS傻傻老公
- 【五一创作】iSH修改hostname(主机名)【美化】【短篇技术类文章】
- XMind 2021 Mac 去水印教程
- 喧喧发布 2.5.3 版本,主要提升系统稳定性,优化交互体验
- android现状及发展趋势,2021年Android手机现状分析
- SpringBoot 之 Web开发
- html页面实现图片滚动
- vue简易微前端项目搭建(一):项目背景及简介
热门文章
- 联网生活方式下,消费者的7大关键需求
- Linux 命令(11)—— col 命令
- maven javaProject打包发布成服务
- C/C++通过WMI和系统API函数获取获取系统硬件配置信息(转)
- Java中J.U.C扩展组件之ForkJoinTask和ForkJoinPool
- linux特殊权限SUID,SGID和SBIT的介绍
- thinkphp 常用SQL执行语句总结
- oracle 创建job
- 数学 - 线性代数导论 - #9 Ax=b的解:存在性、解法、解的结构、解的数量
- 《编写高质量Python代码的59个有效方法》——第19条:用关键字参数来表达可选的行为...