Question

我试图将ContextualWeb News API嵌入到一个简单的HTML页面中。按下按钮后，新闻API应该返回结果列表。我想将响应打印到控制台。

请求看起来像这样：（但是它们没有提供完整的HTML示例）

const url ="https://contextualwebsearch-websearch-v1.p.rapidapi.com/api/Search/NewsSearchAPI?autoCorrect=false&pageNumber=1&pageSize=10&q=Taylor+Swift&safeSearch=false"
const options = {
  method: 'GET',
  headers: {
    "X-RapidAPI-Host": "contextualwebsearch-websearch-v1.p.rapidapi.com",
    "X-RapidAPI-Key": "XXXXXXXX"
  },
}

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.error(e))

可在此处获取Rapid API密钥：https://rapidapi.com/contextualwebsearch/api/web-search

想要一个带有按钮的HTML，并将结果输出到控制台或文本框。

Answer 1

您可以尝试以下操作：

fetch(url, options)
  .then(response => response.json())
  .then(data => showResults(data))
  .catch(e => console.error(e))

showResults(data) {
   data.map(news => console.log(news.title));
}

在提取操作中调用将处理结果的函数。如果您使用的是纯JavaScript，则可以尝试使用innerHTML编写结果。

Answer 2

我能够弄清楚。这是嵌入在简单HTML页面中的ContextualWeb News API请求。按下按钮后，结果JSON将写入控制台。

<!doctype html>
<html>

<head>
</head>

<body>
    <div style="margin: 40px 40px; width: 450px;">

        <button onclick="makeGETRequest()">Make the News API call</button>

        <p>see console the for results</p>
    </div>
    <script>
        function makeGETRequest() {
            const url = "https://contextualwebsearch-websearch-v1.p.rapidapi.com/api/Search/NewsSearchAPI?autoCorrect=false&pageNumber=1&pageSize=10&q=Taylor+Swift&safeSearch=false"
            const options = {
                method: 'GET',
                headers: {
                    "X-RapidAPI-Host": "contextualwebsearch-websearch v1.p.rapidapi.com",
                    "X-RapidAPI-Key": "XXXXXXXXXXXXXXX"
                },
            }

            fetch(url, options)
                .then(response => response.json())
                .then(data => console.log(data))
                .catch(e => console.error(e))
        }
    </script>
</body>

</html>

如何在HTML页面中嵌入ContextualWeb News API？

2 个答案: