codeCamp JSON APIs and Ajax

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 += "<div class = 'cat'>";
          keys.forEach(function(key){
            html += "<b>" + key + "</b>:" + val[key] + "<br>";            
          });
          html += "</div><br>";          
        });
        
        
        // 请把你的代码写在这条注释以上

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

      });
    });
  });

5 Render Images from Data Sources

从上节课获得的JSON数组中，每个对象都包含了一个以imageLink为键(key)，以猫的图片的url为值(value)的键值对。

当我们在遍历这些对象时，我们用imageLink的属性来显示img元素的图片。

代码如下：
html += "<img src = '" + val.imageLink + "'>";

$(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";

        json.forEach(function(val) {

          html += "<div class = 'cat'>";

          // 请把你的代码写在这条注释以下
          
          html += "<img src = '" + val.imageLink + "'>"
          
          // 请把你的代码写在这条注释以上

          html += "</div>";

        });

        $(".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 += "<div class = 'cat'>"

          html += "<img src = '" + val.imageLink + "'>"

          html += "</div>"

        });

        $(".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 + "<br>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 += "<div class = 'cat'>";
          keys.forEach(function(key){
            html += "<b>" + key + "</b>:" + val[key] + "<br>";            
          });
          html += "</div><br>";          
        });

• JSON数组中imageLink的属性来显示img元素的图片:
  html += "<img src = '" + val.imageLink + "'>";
• 过滤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 + "<br>longitude:" + position.coords.longitude);
    });
  }