JavaScript 一个 JSON 示例

发布于 2023-01-23 22:59:42 字数 10077 浏览 4 评论 0

1、开始

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Our superheroes</title>
<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
<style type="text/css">
/* || general styles */
html {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
}
body {
width: 800px;
margin: 0 auto;
}
h1, h2 {
font-family: 'Faster One', cursive;
}
/* header styles */
h1 {
font-size: 4rem;
text-align: center;
}
header p {
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
/* section styles */
section article {
width: 33%;
float: left;
}
section p {
margin: 5px 0;
}
section ul {
margin-top: 0;
}
h2 {
font-size: 2.5rem;
letter-spacing: -5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<header>
</header>
<section>
</section>
<script>
var header = document.querySelector('header');
var section = document.querySelector('section');
// 1、保存一个即将访问的 URL 作为变量
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
// 2、为了创建一个HTTP请求,需要创建一个HTTP请求对象,通过new构造函数的形式。
var request = new XMLHttpRequest();
// 3、使用open()函数打开一个新请求
request.open('GET', requestURL);
// 4、设定 responseType 为 JSON,发送请求
request.responseType = 'json';
request.send();
// 5、最后一点内容涉及相应来自服务器的返回数据,然后处理它
request.onload = function(){
var superheroes = request.response;
populateHeader(superheroes);
showHeroes(superheroes);
}
function populateHeader(jsonObj){
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj['squadName'];
header.appendChild(myH1);
var myPara = document.createElement('p');
myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
header.appendChild(myPara);
}
// 创建英雄卡片
function showHeroes(jsonObj){
var heroes = jsonObj['members'];
for(i = 0; i < heroes.length; i++ ){
var myArticle = document.createElement('article');
var myH2 = document.createElement('h2');
var myPara1 = document.createElement('p');
var myPara2 = document.createElement('p');
var myPara3 = document.createElement('p');
var myList = document.createElement('ul');
myH2.textContent = heroes[i].name;
myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
myPara2.textContent = 'Age: ' + heroes[i].age;
myPara3.textContent = 'Superpowers:';
var superPowers = heroes[i].powers;
for(j = 0; j < superPowers.length; j++){
var listItem = document.createElement('li');
listItem.textContent = superPowers[j];
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
</script>
</body>
</html>

2、加载我们的JSON

为了载入 JSON 到页面中,我们将使用 一个名为 XMLHTTPRequest 的 API(常称为 XHR)。这是一个非常有用的 JavaScript 对象,使我们能够通过代码来向服务器请求资源文件(如:图片,文本,JSON,甚至HTML片段),意味着我们可以更新小段内容而不用重新加载整个页面。这将有更多响应页面,听起来让人兴奋,但是这部分超出我们本部分的文章,所以就不多详述了。

1、首先,我们将保存一个即将访问的 URL 作为变量。在您的 JavaScript 代码的底部添加下面的代码:

var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

2、为了创建一个 HTTP 请求,我们需要创建一个 HTTP 请求对象,通过 new 构造函数的形式。在您最下面的代码中写入:

var request = new XMLHttpRequest();

3、现在我们需要使用 open() 函数打开一个新的请求,添加如下代码:

request.open('GET', requestURL);
  • 这个函数至少含有两个参数,其它的是可选参数。对于示例我们只需要两个强制参数:
  • HTTP 方法,网络连接时使用。这个示例中 GET 就可以了,因为我们只要获得简单的数据。
  • URL,用于指向请求的地址。我们使用之前保存的变量。

4、接下来,添加,两行代码,我们设定 responseType 为 JSON,所以服务器将知道我们想要返回一个 JSON 对象,然后发送请求 :

request.responseType = 'json';
request.send();

5、最后一点内容涉及相应来自服务器的返回数据,然后处理它,添加如下代码在您先前的代码下方:

request.onload = function() {
var superHeroes = request.response;
populateHeader(superHeroes);
showHeroes(superHeroes);
}

这儿我们保存了相应我们请求的数据(访问 response 属性)于变量 superHeroes 这个变量现在含有 JSON,我们现在把 superHeroes 传给两个函数,第一个函数将会用正确的数据填充 <header>,同时第二个函数将创建一个信息卡片,然后把它插入 <section> 中。

我们把代码包在事件处理函数中,当请求对象 load 事件触发时执行代码(见 onload),这是因为请求对象 load 事件只有在请求成功时触发;这种方式可以保证事件触发时 request.response 是绝对可以访问的。

3、定位 header

现在我们已经获得我们的 JSON 数据,让我们利用它来写两个我们使用的函数。首先,添加下面的代码于之前的代码下方:

function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj['squadName'];
header.appendChild(myH1);
var myPara = document.createElement('p');
myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
header.appendChild(myPara);
}

我们称参数为 jsonObj,那也是为什么我们要在其中调用 JSON 对象。这儿我们首先使用 createElement() 创建了一个 <h1> 节点,将它的 textContent 设为 JSON 对象的 squadName 属性,然后通过 appendChild() 把它加入 <header>中。然后我们对段落做了相同的一件事情:创建,设置内容,追加到 <header>。唯一的不同在于它的内容设为一个与 JSON 内属性 homeTown 和formed相关联的字符串。

4、创建英雄信息卡片

接下来,添加如下的函数到脚本代码底部,这个函数创建和展示了superhero cards:

function showHeroes(jsonObj) {
var heroes = jsonObj['members'];
for(i = 0; i < heroes.length; i++) {
var myArticle = document.createElement('article');
var myH2 = document.createElement('h2');
var myPara1 = document.createElement('p');
var myPara2 = document.createElement('p');
var myPara3 = document.createElement('p');
var myList = document.createElement('ul');
myH2.textContent = heroes[i].name;
myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
myPara2.textContent = 'Age: ' + heroes[i].age;
myPara3.textContent = 'Superpowers:';
var superPowers = heroes[i].powers;
for(j = 0; j < superPowers.length; j++) {
var listItem = document.createElement('li');
listItem.textContent = superPowers[j];
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}

首先,我们保存了 JSON 的 members 属性作为一个变量。这个数组含有多个带有英雄信息的对象。

接下来,我们使用一个循环来,遍历每个元素。对于每一个元素,我们:

  • 创建几个元素: 一个 <article>,一个 <h2>,三个 <p> 和一个 <ul>
  • 设置 <h2> 为当前英雄的 name。
  • 使用他们的 secretIdentity、age、Superpowers:介绍信息列表 填充三个段落来。
  • 保存 powers 属性于另一个变量 superPowers,包含英雄的 superpowers 列表。
  • 使用另一个循环来遍历当前的英雄的 superpowers ,对于每一个元素我们创建 <li> 元素,把 superpower 放进去,然后使用 appendChild() 把 listItem 放入 <ul> 元素中。
  • 最后一件事情是追加 <h2><p>,还有 <ul> 进入 <article> myArticle。然后将 <article> 追加到 <section>。追加的顺序很重要,因为他们将被展示在 HTML 中。

6、对象和文本间的转换

上述示例就访问 JSON 而言是简单的,因为我们设置了 XHR 来访问 JSON 格式数据:

request.responseType = 'json';

但是有时候我们没有那么幸运,我们接收到一些 字符串作为 JSON 数据,然后我们想要将它转换为对象。当我们想要发送 JSON 数据作为信息,我们将需要转换它为字符串,我们经常需要正确的转换数据,幸运的是,这两个问题在web环境中是那么普遍以至于浏览器拥有一个内建的 JSON,包含以下两个方法。

  • parse(): 以文本字符串形式接受 JSON 对象作为参数,并返回相应的对象。。
  • stringify(): 接收一个对象作为参数,返回一个对应的 JSON 字符串。

您可以看看我们 heroes-finished-json-parse.html 示例的第一个操作(见 source code) ,除了返回的是 text,这做了一件与我们之前一模一样的事情,然后使用 parse() 来将他转换成为 JavaScript 对象。关键片段如下:

request.open('GET', requestURL);
request.responseType = 'text'; // now we're getting a string!
request.send();
request.onload = function() {
var superHeroesText = request.response; // get the string from the response
var superHeroes = JSON.parse(superHeroesText); // convert it to an object
populateHeader(superHeroes);
showHeroes(superHeroes);
}
  • 正如您所想,stringify() 做相反的事情. 尝试将下面的代码输入您的浏览器 JS 控制台来看看会发生什么:
var myJSON = { "name" : "Chris", "age" : "38" };
myJSON
var myString = JSON.stringify(myJSON);
myString

这儿我们创建了一个 JavaScript 对象,然后检查了它包含了什么,然后用 stringify() 将它转换成 JSON 字符串,最后保存返回值作为变量。然后再一次检查。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据
原文
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。