通过 REST API 获取报告数据以 HTML 格式显示为数据表答案

【问题标题】：Get report data to display as data table in HTML through REST API通过 REST API 获取报告数据以 HTML 格式显示为数据表
【发布时间】：2017-11-25 09:19:34
【问题描述】：

我对 REST API 和 Javascript 知之甚少。但是，我现在需要处理为我的公司发送电子邮件的第三方公司的 REST API，并通过 REST API 获取报告数据。

数据可以通过带有TOKEN的URL的GET方法获取：https://www.probancemail.com/rest/stats/?&token={platformtoken}

JSON 数组示例如下：

{
"bounce":2,
"campaign_external_id":"RT1-",
"campaign_name":"RT1-Welcome1",
"click":19,
"delivered":333,
"open":69,
"sending_external_id":"RT-PWDE1-20170617",
"sendingtime_ts":1497650423000,
"sent":335,
"spam":0,
"template_external_id":"0193",
"unsub":6
}

我需要的第一步是根据带有令牌的URL从第三方检索JSON数据，并通过Jquery解析JSON数据并将其作为表格（HTML）显示在网页上。为此，我在下面找到了 Jquery 代码：

<!DOCTYPE html>
<html>
<head>
<script>
var url = 'https://www.probancemail.com/rest/stats/?&token={platformtoken}'

$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr=[];
for (var i = 0; i < json.length; i++) {
    tr.push('<tr>');
    tr.push("<td>" + json[i].campaign_name + "</td>");
    tr.push("<td>" + json[i].campaign_external_id + "</td>");
    tr.push("<td>" + json[i].sending_external_id + "</td>");
    tr.push("<td>" + json[i].sent + "</td>");
    tr.push("<td>" + json[i].delivered + "</td>");
    tr.push("<td>" + json[i].open + "</td>");
    tr.push("<td>" + json[i].click + "</td>");
    tr.push("<td>" + json[i].spam + "</td>");
    tr.push("<td>" + json[i].unsub + "</td>");
    tr.push('</tr>');
}
$('table').append($(tr.join('')));
});
</script>
</head>
<body>

<table></table>

</body>
</html>

但是，这段代码不起作用，我认为是因为令牌，GetJSON 函数没有获取 JSON。但是，我对此很陌生，所以我没有任何见解。

请您看看并帮我解决问题好吗？欢迎任何建议！ >> 也许我什至不应该使用 Jquery？

提前致谢！

【问题讨论】：

查看网络选项卡，Ajax 请求真的触发了吗？
我认为您需要先获取平台令牌。可能在另一个请求中。您应该联系 API 的供应商，或者查看他们的文档。
@WoutervanVegchel 是的，我有平台令牌，我只是没有把它放在这里，因为它是机密的。

标签： javascript jquery json rest api

【解决方案1】：

我无法访问该网址，我被拒绝访问，所以我尝试使用不同的网址，它的工作原理是这样的..

您可以检查您的网络服务是否返回任何内容，或者是否有任何可能发生的 CORS 问题

$(document).ready(function () {
var url = "https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true"

$.getJSON(url,
function (json) {

var tr = $("<tr></tr>")
for (var i = 0; i < json.results.length; i++) {

var td = "<td>" + json.results[i].address_components[0].long_name+"</td>"
$(tr).append(td);
}

$('table').append($(tr));
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<table></table>

【讨论】：

您好 Atiq 感谢您的意见！我已使用您的输入更新了代码，但出现错误“请求的资源上不存在 'Access-Control-Allow-Origin' 标头。因此不允许访问 Origin 'null'。” >我觉得和token有关？在函数中使用它之前，我应该添加一个步骤来验证 url 吗？
您尝试访问的网址似乎不允许 CORS 访问..您可以附加“&callback=”吗？在网址末尾再试一次？
是的，我尝试过，但它不起作用...我不明白，因为通过在浏览器中单独输入 URL，我可以在网页中获取 JSON...另外，我有也得到了标题： Accept text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 Accept-Encoding gzip, deflate, br Accept-Language en- US,en;q=0.5 Connection keep-alive Cookie JSESSIONID=E531EFCA579352140AEC115BE6A451DD Host www.probancemail.com Upgrade-Insecure-Requests 1 User-Agent Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0

【解决方案2】：

你可以像这样测试代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var data=[{
        "bounce":2,
        "campaign_external_id":"RT1-",
        "campaign_name":"RT1-Welcome1",
        "click":19,
        "delivered":333,
        "open":69,
        "sending_external_id":"RT-PWDE1-20170617",
        "sendingtime_ts":1497650423000,
        "sent":335,
        "spam":0,
        "template_external_id":"0193",
        "unsub":6
    },{
        "bounce":2,
        "campaign_external_id":"RT1-",
        "campaign_name":"RT1-Welcome1",
        "click":19,
        "delivered":333,
        "open":69,
        "sending_external_id":"RT-PWDE1-20170617",
        "sendingtime_ts":1497650423000,
        "sent":335,
        "spam":0,
        "template_external_id":"0193",
        "unsub":6
    }];
    var tr=[];
    for (var i = 0; i < data.length; i++) {
        tr.push('<tr>');
        tr.push("<td>" + data[i].campaign_name + "</td>");
        tr.push("<td>" + data[i].campaign_external_id + "</td>");
        tr.push("<td>" + data[i].sending_external_id + "</td>");
        tr.push("<td>" + data[i].sent + "</td>");
        tr.push("<td>" + data[i].delivered + "</td>");
        tr.push("<td>" + data[i].open + "</td>");
        tr.push("<td>" + data[i].click + "</td>");
        tr.push("<td>" + data[i].spam + "</td>");
        tr.push("<td>" + data[i].unsub + "</td>");
        tr.push('</tr>');
    }
    $('table').append($(tr.join('')));
})
</script>
</head>
<body>

<table></table>

</body>
</html>

或者您可以通过自己编写的api测试您的代码，这是您现在可以做的。

【讨论】：

【解决方案3】：

请按照此操作查看“No 'Access-Control-Allow-Origin'”错误

"No 'Access-Control-Allow-Origin' header is present on the requested resource"

【讨论】：