Fetch -API 返回 HTML 而不是 JSON

js etc

1个回答

写回答

meijins

2025-06-13 13:10

+ 关注

etc
etc

使用Fetch API返回HTML而不是JSON

在Web开发中，使用Fetch API是非常常见的一种方式来获取数据。通常情况下，我们会使用Fetch API来请求JSON数据，然后在前端进行处理和展示。但有时候，我们可能需要从服务器获取HTML内容，而不是JSON数据。本文将介绍如何使用Fetch API来获取HTML内容，并提供一个案例代码来帮助理解。

使用Fetch API获取HTML内容

要使用Fetch API获取HTML内容，我们可以使用fetch函数，并将要请求的HTML文件的URL作为参数传递给fetch函数。fetch函数将返回一个Promise对象，我们可以使用then方法来处理返回的结果。在then方法中，我们可以使用response对象的text方法来获取HTML内容。

下面是一个简单的示例代码，演示了如何使用Fetch API获取HTML内容：

Javascript
fetch('https://example.com/index.html')
  .then(response => response.text())
  .then(html => {
    // 在此处处理获取到的HTML内容
    console.log(html);
  })
  .catch(error => {
    // 在此处处理错误
    console.error(error);
  });

在上面的代码中，我们使用fetch函数来请求https://example.com/index.html的内容。然后，我们使用response对象的text方法来获取HTML内容，并在控制台打印出来。如果发生错误，我们可以使用catch方法来处理错误。

案例代码

为了更好地理解如何使用Fetch API获取HTML内容，我们提供一个案例代码。假设我们有一个简单的HTML文件，其中包含一个标题和一些段落。我们希望通过Fetch API来获取这个HTML文件的内容，并将标题和段落分别显示在页面上。

HTML文件的内容如下所示：

html
<!DOCTYPE html>
<html>
<head>
  <title>示例页面</title>
</head>
<body>
  <h1>这是一个示例页面</h1>
  这是一个段落。
  
<img src="https://img.izhida.com/topic/5bc06f5800d415cc95e1349edbaca425.jpg" alt="JS"><br>JS
这是另一个段落。
</body>
</html>

我们可以使用以下代码来实现上述需求：

Javascript
fetch('https://example.com/index.html')
  .then(response => response.text())
  .then(html => {
    // 将获取到的HTML内容插入到页面中
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    
    const title = doc.querySelector('h1').textContent;
    const paragraphs = doc.querySelectorAll('p');
    
    // 将标题插入到页面中
    const titleElement = document.createElement('h1');
    titleElement.textContent = title;
    document.body.appendChild(titleElement);
    
    // 将段落插入到页面中
    paragraphs.forEach(paragraph => {
      const paragraphElement = document.createElement('p');
      paragraphElement.textContent = paragraph.textContent;
      document.body.appendChild(paragraphElement);
    });
  })
  .catch(error => {
    // 在此处处理错误
    console.error(error);
  });

在上面的代码中，我们首先通过Fetch API获取到HTML文件的内容。然后，我们使用DOMParser来解析HTML内容，并将其转换为一个DOM文档。接下来，我们使用querySelector方法来获取标题元素和段落元素，并将它们的文本内容插入到页面中。

在本文中，我们介绍了如何使用Fetch API来获取HTML内容。通过使用fetch函数和response对象的text方法，我们可以轻松地从服务器获取HTML文件的内容。我们还提供了一个案例代码来帮助理解如何使用Fetch API来获取HTML内容并在页面中展示。希望本文能对你理解和使用Fetch API有所帮助。

举报有用（4）分享收藏

Fetch -API 返回 HTML 而不是 JSON

1个回答

meijins

热门话题

相关问题