时间戳

首页 > 解决方案 > 为什么函数“点击”会记住来自 JSON 的数据？

javascript - 为什么函数“点击”会记住来自 JSON 的数据？

问题描述

我正在学习 javascript 课程，任务是从 JSONPLACEHOLDER 获取 JSON 数据并显示用户名。通过单击他们的姓名，应显示有关用户的完整数据。

JS代码：

const ul = document.querySelector(".list-group");
const h1 = document.querySelector("h1");

function getUsers(renderUsers) {
   const xhr = new XMLHttpRequest();
   xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
   xhr.addEventListener("load", () => {
      const response = JSON.parse(xhr.responseText);
      renderUsers(response);
   });

   xhr.addEventListener("error", () => {
      console.log("error");
   });

   xhr.send();
}

function renderUsers(response) {
   const fragment = document.createDocumentFragment();
   response.forEach((user) => {
      const li = document.createElement("li");
      li.classList.add("list-group-item");
      li.textContent = user.name;
      li.addEventListener("click", (e) => {
         h1.innerHTML = `<h3>Email: ${user.email} <br>
                          Username: ${user.username} <br></h3>
                          Address: <h5>${user.address["street"]}, ${user.address["city"]}, ${user.address["zipcode"]}</h5>
                          </h3>Phone: ${user.phone}
                          </h3>`;
      });
      fragment.appendChild(li);
   });
   ul.appendChild(fragment);
}

getUsers(renderUsers);

所以，我不知道，为什么会显示信息。毕竟，这没有保存在任何地方，或者我不明白。请告诉我点击信息从哪里来的逻辑？

标签： javascriptjsonxmlhttprequest

解决方案

函数向用户getUsers发出请求https://jsonplaceholder.typicode.com/users并接收用户 JSON 数据作为回报。然后调用函数renderUsers，该函数循环解析的 JSON 数据并在 html 中插入/呈现具有完整数据的用户。

有关 XMLHttpRequests 的更多信息
https://www.w3schools.com/xml/xml_http.asp

请求中的第一个示例用户信息

  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }

关于 JSON
https://www.w3schools.com/js/js_json_intro.asp

推荐阅读