JSON 学习笔记

当你需要根据服务器返回的数据来动态改变页面的时候,应用程序接口(API)就派上用场了。

记住,API——应用程序接口(Application Programming Interface)是计算机之间相互交流沟通的工具。

许多网站的应用程序接口(API)都是通过一种称为JSON格式的数据来传输的,JSON 是 JavaScript Object Notation的简写。

 

它通常表现为了两种形式,一种为单个对象,一种为多个对象

单个对象类似于:
{name:'盖伦',advantage:'单挑无敌'}

多个对象类似于:
[{name:'盖伦',advantage:'单挑无敌'},{name:'诺克',advantage:'上单霸主'}]

 

jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

描述: 使用一个HTTP GET请求从服务器加载JSON编码的数据。

  • url
    类型: String
    一个包含发送请求的URL字符串
  • data
    类型: PlainObject or String
    一个普通的对象或字符串,用来发送请求给服务器。
  • success
    Type: FunctionPlainObject data, String textStatus, jqXHR jqXHR )
    当请求成功后执行的回调函数。

//从之前的猫图API拿取数据:

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

https://www.freecodecamp.cn/challenges/get-json-with-the-jquery-getjson-method

JSON.stringify 语法讲解

 

使用.forEach()函数来循环遍历JSON数据

json.forEach(function(val) {

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

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

  html += "</div>"

});

 

过滤.filter

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

 

 

原文地址:https://www.cnblogs.com/jeacy/p/6479364.html