codeCampJSONAPIsandAjax

codecamp json apis and ajax

文章目录

1 trigger click events with jquery2 change text with click events3 get json with the jquery getjson method4 convert json data to html5 render images from data sources6 prefilter json7 get geolocation dataconclusion

1 trigger click events with jquery

$(document).ready()函数中的代码只会在我们的页面加载时候运行一次，确保执行js之前页面所有的dom已经准备就绪。

任务：给"get message"按钮绑定一个点击事件。我们先在$(document).ready()函数中增加一个click事件。

$("#getmessage").on("click",function()});

2 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(){

$(".message").html("here is the message");

});

});

3 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拿取数据吧。

$(document).ready(function() {

$("#getmessage").on("click", function(){

// 请把你的代码写在这条注释以下

$.getjson("/json/cats.json",function(json){

$(".message").html(json.stringify(json));

});

// 请把你的代码写在这条注释以上

});

});

4 convert json data to html

好了，我们已经从json api中获得了数据，现在把它们展现到我们的html页面中吧。

定义一个html变量，var html = "";。

使用.foreach()函数来循环遍历json数据写到html变量中，最后把html变量显示到我们的页面中。

$(document).ready(function() {

$("#getmessage").on("click", function() {

$.getjson("/json/cats.json", function(json) {

var html = "";

// 请把你的代码写在这条注释以下

json.foreach(function(val){

var keys = object.keys(val);

html += "

"; keys.foreach(function(key){ html += "" + key + ":" + val[key] + "

"; }); html += "

"; }); // 请把你的代码写在这条注释以上 $(".message").html(html); }); }); });

5 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 += "

"; // 请把你的代码写在这条注释以下 html += "" // 请把你的代码写在这条注释以上 html += "

"; }); $(".message").html(html); }); }); });

6 prefilter json

如果我们不想把所有从json api中得到的图片都展现出来，我们可以在遍历之前做一次过滤。

我们把其中 “id” 键的值为1的图片过滤掉。

$(document).ready(function() {

$("#getmessage").on("click", function() {

$.getjson("/json/cats.json", function(json) {

var html = "";

// 请把你的代码写在这条注释以下

json = json.filter(function(val){

return (val.id !== 1);

});

// 请把你的代码写在这条注释以上

json.foreach(function(val) {

html += "

" html += "" html += "

" }); $(".message").html(html); }); }); });

7 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);

});

}

conclusion

$(document).ready()页面加载时候运行函数中的代码 $("#getmessage").on("click",function()}); 增加一个click事件 $(".message").html("here is the message");将class为message 的元素的文本改为：“here is the message”。 通过.getjson()方法访问json数据

$.getjson("/json/cats.json",function(json){

$(".message").html(json.stringify(json));

});

使用.foreach()函数来循环遍历json数据写到html变量中，最后把html变量显示到我们的页面中

json.foreach(function(val){

var keys = object.keys(val);

html += "

"; keys.foreach(function(key){ html += "" + key + ":" + val[key] + "

"; }); html += "

"; }); json数组中imagelink的属性来显示img元素的图片:

html += ""; 过滤json数据：json = json.filter(function(val){ return (val.id !== 1); }); 浏览器navigator获得我们当前所在的位置geolocation:

if (navigator.geolocation){

navigator.geolocation.getcurrentposition(function(position){

$("#data").html("latitude:"+position.coords.latitude + "

longitude:" + position.coords.longitude);

});

}