A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/zh-CN/docs/Learn_web_development/Core/Scripting/Network_requests below:

从服务器获取数据 - å¦ä¹ Web 开发

对于此示例，我们将从几个不同的文本文件中请求数据，并使用它们来填充内容区域。

这一系列文件将假定为我们的数据库；在实际的应用程序中，我们更有可能使用服务端语言（如 PHP、Python 或 Node）从数据库中获取数据。但在这里，我们希望保持简单并专注于客户端部分。

要开始此示例，请在计算机的新的目录中创建 fetch-start.html 和四个文本文件（verse1.txt、verse2.txt、verse3.txt 和 verse4.txt）的本地拷贝。在这个示例中，当你在下拉菜单中选择一个选项时，我们会获取不同的诗歌（你可能会认识）。

在 <script> 元素中，添加以下代码。这会存储对 <select> 和 <pre> 元素的引用，并对 <select> 元素添加一个事件监听器，以便在用户选择一个新的值时，新值将作为参数传递给名为 updateDisplay() 的函数。

const verseChoose = document.querySelector("select");
const poemDisplay = document.querySelector("pre");

verseChoose.addEventListener("change", () => {
  const verse = verseChoose.value;
  updateDisplay(verse);
});

下面让我们定义 updateDisplay() 函数。首先，将以下内容放在你之前的代码块下方——这是该函数的空壳。

function updateDisplay(verse) {

}

让我们将通过构造一个指向我们要加载的文本文件的相对 URL 来开始编写函数，因为我们稍后需要它。任何时候 <select> 元素的值都与所选的 <option> 内的文本相同（除非在值属性中指定了不同的值）——例如“Verse 1”。相应的诗歌文本文件是“verse1.txt”，并与 HTML 文件位于同一目录中，因此只需要文件名即可。

但是，web 服务器往往是区分大小写的，且文件名没有空格。要将“Verse 1”转换为“verse1.txt”，我们需要将 V 转换为小写、删除空格，并在末尾添加“.txt”。这可以通过 replace()、toLowerCase() 和模板字符串来完成。在 updateDisplay() 函数中添加以下代码：

verse = verse.replace(" ", "").toLowerCase();
const url = `${verse}.txt`;

最后，我们可以开始使用 Fetch API 了：

// 调用 `fetch()`，传入 URL。
fetch(url)
  // fetch() 返回一个 promise。当我们从服务器收到响应时，
  // 会使用该响应调用 promise 的 `then()` 处理器。
  .then((response) => {
    // 如果请求没有成功，我们的处理器会抛出错误。
    if (!response.ok) {
      throw new Error(`HTTP 错误：${response.status}`);
    }
    // 否则（如果请求成功），我们的处理器通过调用
    // response.text() 以获取文本形式的响应，
    // 并立即返回 `response.text()` 返回的 promise。
    return response.text();
  })
  // 若成功调用 response.text()，会使用返回的文本来调用 `then()` 处理器，
  // 然后我们将其拷贝到 `poemDisplay` 框中。
  .then((text) => (poemDisplay.textContent = text))
  // 捕获可能出现的任何错误，
  // 并在 `poemDisplay` 框中显示一条消息。
  .catch((error) => (poemDisplay.textContent = `获取诗歌失败：${error}`));

这里有很多内容需要展开。

首先，Fetch API 的入口点是一个名为 fetch() 的全局函数，它以 URL 为参数（其使用另一个可选参数来进行自定义设置，但我们在这里不使用它）。

接下来，fetch() 是一个异步 API，会返回一个 Promise。如果你不知道什么是 Promise，请参阅异步 JavaScript 章节，然后再回到这里。你会发现那篇文章也介绍了 fetch() API！

因为 fetch() 返回一个 Promise，所以我们将一个函数传递给它返回的 Promise 的 then() 方法。此方法会在 HTTP 请求收到服务器的响应时被调用。在它的处理器中，我们检查请求是否成功，并在请求失败时抛出一个错误。否则，我们调用 response.text() 以获取文本形式的响应正文。

response.text() 也是异步的，所以我们返回它返回的 Promise，并向新的 Promise 的 then() 方法传递一个函数。这个函数会在响应文本可用时被调用，在这个函数中，我们会使用该文本更新 <pre> 块。

最后，我们在最后链式调用 catch() 处理器，以捕获我们调用的异步函数或其他处理器中抛出的任何错误。

此示例的一个问题是，它在第一次加载时不会显示任何诗歌。要解决此问题，请在代码的最后（</script> 结束标签之前）添加以下两行代码，以默认加载第一首诗歌，并确保 <select> 元素始终显示正确的值：

updateDisplay("Verse 1");
verseChoose.value = "Verse 1";

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4