通过REST API获取报告数据以HTML形式显示为数据表
[英]Get report data to display as data table in HTML through REST API
问题描述
I have very little knowledge of REST API and Javascript. 
我对REST API和Java的知识很少。 However, I now need to work on a REST API of a third party company which is sending emails for my company and to get the report data through the REST API. 但是，我现在需要使用第三方公司的REST API，该公司正在为我的公司发送电子邮件，并通过REST API获取报告数据。
The data can get through a GET method with an URL with TOKEN: https://www.probancemail.com/rest/stats/?&token= {platformtoken} 数据可以通过带有令牌的URL的GET方法获取： https ://www.probancemail.com/rest/stats/? & token = {platformtoken}
Sample of JSON array as below: 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
}
What I need as a first step is to retrieve the JSON data from the third-party based on the URL with token, and parse the JSON data through Jquery and display it on the webpage as table(HTML). 第一步，我需要基于带有令牌的URL从第三方检索JSON数据，并通过Jquery解析JSON数据并将其显示为网页（HTML）。 To achieve that, I have found the Jquery codes below: 为此，我发现了以下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>
However, this code doesn't work, I think it is because of the token, the GetJSON function doesn't get the JSON. 但是，此代码不起作用，我认为是由于令牌的原因，GetJSON函数无法获取JSON。 However, I'm very new to this, so I don't have any insights. 但是，我对此很陌生，所以我没有任何见解。
Will you please take a look and help me figure out the problem? 您能否看一下并帮助我解决问题？ Any advice is welcomed! 任何建议都欢迎！ >> Maybe I shouldn't use Jquery even? >>也许我什至不应该使用Jquery？
Thanks in advance! 提前致谢！
3 个解决方案
解决方案1
0 2017-06-22 08:22:11
I was not able to access the url, I got access denied, so i tried with different url, it works like this.. 我无法访问该网址，但拒绝访问，因此我尝试使用其他网址，它的工作方式如下：
You can check your webservice whether it's returning anything, or if there's any CORS issue which is likely to happen 您可以检查您的网络服务是否返回任何东西，或者是否可能发生任何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
you can test code like this: 您可以像这样测试代码：
<!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>
or you can test your code by api write by yourself,this what you can do now. 或者您也可以通过自己编写的api来测试您的代码，这就是您现在可以执行的操作。
解决方案3
0 2017-06-22 11:52:35
Follow this for the "No 'Access-Control-Allow-Origin' error 请遵循此以解决“无'Access-Control-Allow-Origin'错误
"No 'Access-Control-Allow-Origin' header is present on the requested resource" “所请求的资源上没有'Access-Control-Allow-Origin'标头”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.