JSON APIs and Ajax (2 hours) #20

NBR-hugh · 2016-11-02T01:21:17Z

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(网络传输速度)。

Ajax

Ajax：全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML）; 是指一种创建交互式网页应用的网页开发技术

NBR-hugh · 2016-11-02T01:21:49Z

20161102 9:20 BEGIN

NBR-hugh · 2016-11-02T01:22:54Z

项目

Trigger Click Events with jQuery total:10min

Change Text with Click Events TOTAL:10MIN

Get JSON with the jQuery getJSON Method TOTAL:35MIN

Convert JSON Data to HTML TOTAL:50MIN

Render Images from Data Sources TOTAL:13MIN

Prefilter JSON TOTAL:5MIN

Get Geo-location Data TOTAL:15MIN

总计投入时间：2h20min

NBR-hugh · 2016-11-02T01:36:07Z

Trigger Click Events with jQuery 使用jQuery 单击触发事件

要点

在 $(document).ready(function() {}添加 $("#getMessage").on("click",function(){});实现点击事件控制**（a click event handler）**

$(document).ready(function() {
// Only change code below this line.
$("#getMessage").on("click",function(){});

// Only change code above this line.
});

完整程序

<script>
  $(document).ready(function() {
    // Only change code below this line.
    $("#getMessage").on("click",function(){});

    // Only change code above this line.
  });
</script>


<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

记录

20161102 09:25 BEGIN
20161102 09:35 END
total:10min

NBR-hugh · 2016-11-02T01:45:27Z

Change Text with Click Events 用点击事件改编文本

要点

添加 $(".message").html("Here is the message");实现功能：当用户点击按钮时，文本从The message will go here变成Here is the message，注意命令中message是所修改的html元素的class：

<div class = "col-xs-12 well message">
      The message will go here
    </div>

完整程序：

<script>
  $(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.
    });
  });
</script>


<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

记录

20161102 09：35 BEGIN
20161202 09：45 END
TOTAL:10MIN

NBR-hugh · 2016-11-02T02:20:56Z

Get JSON with the jQuery getJSON Method 获得JOSN

要点

你可以请求从外部资源请求数据，这时APIs（tools that computers use to communicate with one another.）就发挥作用
JSON 是许多web APIs传输数据的格式，并且是JavaScript的对象符号（stands for JavaScript Object Notation.）;每当你在使用对象符号时(whenever you create a JavaScript object)，就是在使用JSON;
JSON组成：object properties and their current values, sandwiched between a { and a }.These properties and their values are often referred to as "key-value pairs".

问题

按要求手动添加

  $.getJSON("/json/cats.json",function(json){
        $(".message").html(JOSN.stringify(json));
      });

结果无法通过测试，于是直接复制黏贴命令看是否是输入错误，通过挑战，确定为输入错误。
原命令为：

$.getJSON("/json/cats.json", function(json) {
  $(".message").html(JSON.stringify(json));
});

发现错误为将JSON 输成 JOSN,戒之戒之！！！

完整程序

<script>
  $(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.
    });

  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message" >
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

记录

20161102 09：45 BEGIN
20161202 10：20 END
TOTAL:35MIN

NBR-hugh · 2016-11-02T03:12:47Z

Convert JSON Data to HTML 将JSON数据传递给HTML

要点

.forEach() method to loop through our data and modify our HTML elements.【循环通过数据并修改HTML元素】
let's loop through our JSON, adding more HTML to that variable. When the loop is finished, we'll render it.【循环完毕，提交】
变量的传递，每个命令的具体功能等等弄不懂的地方很多，用纸笔画了程序的执行流程已经问题，需要等理解加深后再回来解答

程序

<script>
  $(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 +="<div class='cat'>";
          keys.forEach(function(key){
               html += "<strong>"+ key +"</strong>"+ val[key]+"<br>";
                       });
          html +="</div><br>";
        });
        // Only change code above this line.

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

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
   </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

实现效果

点击按钮，原来的文本信息转化为从JSON传递来的文本信息

记录

20161102 10：20 BEGIN
20161202 11：10 END
TOTAL:50MIN

NBR-hugh · 2016-11-02T03:27:32Z

Render Images from Data Sources 从数据源提取图片

要点

在json.forEach(function(val) 函数中添加
html += "<img src = '"+val.imageLink + "'" +"alt='" + val.altText + "'>";
便可以提取图片
发现forEach的功能似乎是添加与编辑html文本

问题

命令里的双引号“”以及单引号‘’有点混乱，要捋一捋。【解决：双引号""是+的间隔，单引号‘’与<>都是输入的文本】

程序

<script>
  $(document).ready(function() {

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

        var html = "";

        json.forEach(function(val) {

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

          // Only change code below this line.

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

          // Only change code above this line.

          html += "</div>";

        });

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

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

记录

20161102 11：15 BEGIN
20161202 11：28 END
TOTAL:13MIN

NBR-hugh · 2016-11-02T03:35:10Z

Prefilter JSON 预先过滤 JSON

要点

当我们不需要从our Free Code Camp's Cat Photo JSON API传递每一张猫咪图片时，可以在loop thought it时筛选掉它
这里筛选的 id=1 的图片
在$.getJSON("/json/cats.json", function(json) {内添加

json = json.filter(function(val){
          return(val.id !== 1 );
        })

程序

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

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

          html += "</div>"

        });

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

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

记录

20161102 11：30 BEGIN
20161202 11：35 END
TOTAL:5MIN

NBR-hugh · 2016-11-02T03:44:55Z

Get Geolocation Data 获取地理数据

要点

获取用户的地理位置
You will see a prompt to allow or block this site from knowing your current location【你可以允许或者禁止当前网站】
命令：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
  });
}

这个好像直接用就好了，有些地方还不是很理解，看了标准教程就明白了

程序

<script>
  // Only change code below this line.
  if (navigator.geolication){
    navigator.geolocation.getCurrentPosition(function(position){
     $("#data").html("latitude+" + position.coords.latitude +"<br>longitude:"+position.coords.longitude);
    });
  }


  // Only change code above this line.
</script>
<div id = "data">
  <h4>You are here:</h4>

</div>

记录

20161102 11：30 BEGIN
20161202 11：45 END
TOTAL:15MIN

NBR-hugh · 2016-11-02T03:49:18Z

20161202 11：50 END
遗留3个问题待解答：
1. Convert JSON Data to HTML TOTAL 2个问题，纸笔
2. 地理位置的每个指令含义

NBR-hugh added the knowledge point label Nov 2, 2016

NBR-hugh added this to the JavaScript milestone Nov 2, 2016

NBR-hugh self-assigned this Nov 2, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JSON APIs and Ajax (2 hours) #20

JSON APIs and Ajax (2 hours) #20

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

JSON APIs and Ajax (2 hours) #20

JSON APIs and Ajax (2 hours) #20

Comments

NBR-hugh commented Nov 2, 2016 • edited Loading

JSON

Ajax

NBR-hugh commented Nov 2, 2016

NBR-hugh commented Nov 2, 2016 • edited Loading

项目

NBR-hugh commented Nov 2, 2016 • edited Loading

Trigger Click Events with jQuery 使用jQuery 单击触发事件

要点

完整程序

记录

NBR-hugh commented Nov 2, 2016 • edited Loading

Change Text with Click Events 用点击事件改编文本

要点

完整程序：

记录

NBR-hugh commented Nov 2, 2016 • edited Loading

Get JSON with the jQuery getJSON Method 获得JOSN

要点

问题

完整程序

记录

NBR-hugh commented Nov 2, 2016 • edited Loading

Convert JSON Data to HTML 将JSON数据传递给HTML

要点

程序

实现效果

记录

NBR-hugh commented Nov 2, 2016 • edited Loading

Render Images from Data Sources 从数据源提取图片

要点

问题

程序

记录

NBR-hugh commented Nov 2, 2016

Prefilter JSON 预先过滤 JSON

要点

程序

记录

NBR-hugh commented Nov 2, 2016 • edited Loading

Get Geolocation Data 获取地理数据

要点

程序

记录

NBR-hugh commented Nov 2, 2016 • edited Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading

NBR-hugh commented Nov 2, 2016 •

edited

Loading