javascript - JSON 从 url 到 PHP 表

Question

我从下面的 url 获取数据

https://www.cmegroup.com/CmeWS/mvc/Margins/OUTRIGHT?1=1&sortField=exchange&sortAsc=true&exchange=NYM&sector=DME+Products&pageSize=500&pageNumber=1&_=1537972316703

我想在我的页面上显示一个 html 表格，像下面的图片 HTML Table

任何人都可以借助 javascript 或 php 帮助我获得所需的表格。

更新:下面是我正在尝试的代码，不确定

<script>
var url = "https://www.cmegroup.com/CmeWS/mvc/Margins/OUTRIGHT?1=1&sortField=exchange&sortAsc=true&exchange=NYM&sector=DME+Products&pageSize=500&pageNumber=1&_=1537972316703";
 
// send AJAX request
var req = new XMLHttpRequest();
req.onload = function() {
	generateHTMLTable(req.response);
}
req.open("GET",url);
req.send();
 
// generate HTML string and insert it
function generateHTMLTable(data) {
	var str = "";
	for(var row=0; row<data.length; row++) {
		str += "<tr>"; // open HTML row
		for(var col=0; col<data[row].length; col++)
			str += "<td>" + data[row][col].name + "</td>";
		str += "</tr>"; // close HTML row
	}
	
	// assumes the table element has id "table":
	// <table id="table"></table>
	var table = document.getElementById("table");
	table.innerHTML = str;
}
</script>

Answer 1

使用 PHP(如果需要，您仍然可以使用 AJAX 检索数据，但您的端点 (url) 不允许跨源请求 - 您可以使用 CORS 代理，例如 https://cors.io ):

<?php
$url = "https://www.cmegroup.com/CmeWS/mvc/Margins/OUTRIGHT?1=1&sortField=exchange&sortAsc=true&exchange=NYM&sector=DME+Products&pageSize=500&pageNumber=1&_=1537972316703";
$json = file_get_contents($url);
$arr = json_decode($json);

echo '<table>';
echo '<th>exchange</th><th>sector</th><th>name</th><th>product family</th><th>start period</th><th>end period</th><th>maintenance rate</th><th>vol scan maintenance rate</th>';
foreach($arr->marginRates as $key => $value) {
    echo '<tr style="border: 1px solid black;">';
    echo '<td style="border: 1px solid black;">' . $value->exchange . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->sector . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->name . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->productFamily . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->startPeriod . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->endPeriod . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->maintenanceRate . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->volScanMaintenanceRate . '</td>';
    echo '</tr>';
}
echo '</table>';

你应该使用自己的样式规则(CSS 表)，我想，我只是为这个例子复制粘贴了一个黑色边框，这确实不是很整洁。