从 AJAX API 获取数据并在 HTML 文档中显示答案

【问题标题】：Get data from AJAX API and display it in HTML document从 AJAX API 获取数据并在 HTML 文档中显示
【发布时间】：2018-01-12 06:55:09
【问题描述】：

我正在对一些 API 代码进行一些故障排除。

我们希望从 API 调用中带回的 XML 格式中获取并将其转换为 JSON。为了帮助我完成这个操作，我想看看数据是什么样子的，所以我只是想让它打印到 HTML 文档的正文中。这是在浏览器中打开时什么都不显示，但显示响应数据的 HTML 代码：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <h2> Response Data </h2>
    <!-- AJAX API Call -->

    <script> 
    {
        var settings = {
            "async": true,
            "crossDomain": true,
            "url": "https://qualysapi.qg2.apps.qualys.com/api/2.0/fo/scan/?action=list",
            "method": "GET",
            "headers": {
                "Authorization": "#############################################",
                "Cache-Control": "no-cache",
            }
        }

        $.ajax(settings).done(function (response) {
            $('body').append(response);
        });
    }
    </script>
</body>

有没有更好的方法来做到这一点？

【问题讨论】：

当你使用console.log时它不会显示在页面上，它会打印到控制台（F12，控制台选项卡）
我不确定这是否是由于未获得授权，但我收到了 302 redirect。 Be sure to specify the header with your API request. This syntax must be included: "-H X-Requested-With: <user description, like a user agent>"
@showdev，这可能是因为出于安全原因，我将授权更改为 ######。
@PatrickEvans 实际上我之前在控制台中查看过是否有错误。我没有看到任何显示或有错误
@NJ13 同意。不幸的是，如果没有身份验证，这将很难解决。

标签： javascript html json ajax

【解决方案1】：

console.log() 将信息输出到浏览器控制台（开发人员工具）。您需要将输出定向到页面上的元素。以下使用 JQuery 将响应附加到 body 元素：

$.ajax(settings).done(function (response) {
    $('body').append(response);
});

【讨论】：

【解决方案2】：

console.log 在控制台/开发者工具中输出东西。不在 HTML (DOM) 中。

您想要做的是操作 DOM。 Javascript 代码的位置并不意味着它将在<body> 标记内输出。

您需要遍历 response 对象的内容（应该是 JSON 或 XML），然后将文本节点甚至子 DOM 节点附加到 <body> 标记。

此外，您正在使用的$.ajax 函数使用jQuery library。因此，您需要在您的<head> 标签中包含它——本地副本或通过 CDN。或者至少在您在自定义 Javascript 代码中调用它之前。

这是非常基础的，您可以通过 Google 轻松找到许多关于如何实施的指南。

【讨论】：

我将 CDN 添加到标题中，但仍然没有看到任何内容。我将进一步研究 API 调用，看看问题出在哪里。另外，感谢您提供有关迭代响应的信息。曾经，我可以让 API 返回我下一步要做的数据