通過REST API獲取報告數據以HTML形式顯示為數據表
[英]Get report data to display as data table in HTML through REST API
問題描述
我對REST API和Java的知識很少。 但是，我現在需要使用第三方公司的REST API，該公司正在為我的公司發送電子郵件，並通過REST API獲取報告數據。
數據可以通過帶有令牌的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？
提前致謝！
3 個解決方案
解決方案1
0 2017-06-22 08:22:11
我無法訪問該網址，但拒絕訪問，因此我嘗試使用其他網址，它的工作方式如下：
您可以檢查您的網絡服務是否返回任何東西，或者是否可能發生任何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>
解決方案2
0 2017-06-22 08:26:51
您可以像這樣測試代碼：
<!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
0 2017-06-22 11:52:35
請遵循此以解決“無'Access-Control-Allow-Origin'錯誤
無法獲取HTML表以顯示來自API的數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.