Question

我正在对某些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>

有更好的方法吗？

Answer 1

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

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

Answer 2

console.log输出Console / Developer Tools中的内容。不在HTML（DOM）中。

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

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

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

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

从AJAX API获取数据并将其显示在HTML文档中

2 个答案: