如何使用 `async/await` 函数 `fetch` 从服务器显示电子邮件和消息？

2024-03-22 06:13:42

使用 async/await 函数 fetch 从服务器显示电子邮件和消息

作为一名经验丰富的程序员和技术作家，我经常遇到这样的情况：需要从服务器获取数据，并将其显示在网页上。最近，我遇到了一种使用 async/await 函数 fetch 来实现这一目标的新方法，我迫不及待地想与大家分享。

问题概述

我们希望从服务器获取电子邮件和消息数据，并将它们显示在带有以下格式的 div 中：

电子邮件 1 消息 1

电子邮件 2 消息 2

解决方法

1. 获取数据

async function getData() {
  const url = 'path/to/your/php/script';  // 替换为你的 PHP 脚本 URL
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

getData 函数使用 async/await 从服务器获取 JSON 数据。

2. 显示数据

async function displayData() {
  const data = await getData();

  // 创建一个 HTML 字符串来存储电子邮件和消息
  let html = '';

  // 遍历数据，并为每个电子邮件和消息创建一个 `div`
  data.forEach(element => {
    html += `<div>
                <b>${element.emailaddress}</b>
                <p>${element.message}</p>
              </div>`;
  });

  // 将 HTML 字符串添加到 `div` 元素
  document.querySelector('#display-div').innerHTML = html;
}

// 调用 `displayData` 函数
displayData();

displayData 函数使用 async/await 等待 getData 函数返回数据，然后循环遍历数据并创建 HTML 字符串。
div 元素的 innerHTML 属性被设置为 HTML 字符串，它将电子邮件和消息显示在 div 中。

HTML 部分

<div id="display-div"></div>

注意事项

确保你的 PHP 脚本正确配置，并且能够返回 JSON 数据。
替换 path/to/your/php/script 为你的实际 PHP 脚本 URL。

结论

使用 async/await 函数 fetch 从服务器获取数据是一种强大而高效的方法。通过这种方法，我们可以轻松地将数据显示在网页上。我希望这篇文章对你有帮助，欢迎在评论区留下你的问题或反馈。

常见问题解答

什么是 async/await？
async/await 是一种允许我们编写异步代码的 JavaScript 特性，就像它是同步代码一样。
什么是 fetch 函数？
fetch 函数是 JavaScript 的内置函数，用于从服务器获取数据。
如何确保 PHP 脚本返回 JSON 数据？
确保你的 PHP 脚本设置了正确的 Content-Type 标头，例如 Content-Type: application/json。
如何在网页上显示数据？
可以使用 innerHTML 属性将 HTML 字符串添加到 div 元素来显示数据。
如何避免 XSS 攻击？
在显示从服务器获取的数据时，务必注意 XSS 攻击。使用安全的函数来转义 HTML 字符，并确保数据被正确地验证和过滤。