freeCodeCamp教程：从数据源渲染图片的实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00058/article/details/148323808

freeCodeCamp教程：从数据源渲染图片的实战指南

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp

前言

在现代Web开发中，动态加载和显示图片是一项基本技能。本教程将带你学习如何从JSON数据源获取图片URL，并在网页上动态渲染这些图片。这是freeCodeCamp数据可视化课程中的一个重要实践环节。

核心概念

JSON数据与图片渲染

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。在Web开发中，我们经常需要从服务器获取JSON格式的数据，然后将其中的图片URL提取出来，最终在页面上显示这些图片。

技术要点

AJAX请求：使用XMLHttpRequest对象从服务器获取JSON数据
JSON解析：将获取的JSON字符串转换为JavaScript对象
DOM操作：动态创建HTML元素并插入到页面中

实战步骤

1. 获取JSON数据

首先，我们需要创建一个XMLHttpRequest对象来获取包含图片信息的JSON数据：

const req = new XMLHttpRequest();
req.open('GET', '/json/cats.json', true);
req.send();

2. 处理响应数据

当请求完成后，我们需要解析JSON数据并处理：

req.onload = function() {
  const json = JSON.parse(req.responseText);
  let html = '';
  // 处理每一条数据
  json.forEach(function(val) {
    // 构建HTML内容
  });
};

3. 构建图片HTML

关键步骤是使用JSON对象中的imageLink和altText属性构建img标签：

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

4. 完整代码示例

以下是完整的实现代码：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('getMessage').onclick = function() {
    const req = new XMLHttpRequest();
    req.open('GET', '/json/cats.json', true);
    req.send();
    req.onload = function() {
      const json = JSON.parse(req.responseText);
      let html = '';
      json.forEach(function(val) {
        html += "<div class='cat'>";
        html += "<img src='" + val.imageLink + "' alt='" + val.altText + "'>";
        html += "</div><br>";
      });
      document.getElementsByClassName('message')[0].innerHTML = html;
    };
  };
});