Question

我正在从下面的网址获取数据

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）：< / p>

<?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工作表），我想，对于这个示例，我只是复制粘贴了黑色边框，但是这并不是很整齐。

Answer 2

尝试一下，可能对您有帮助

在HTML上

getdata.php

<?php

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://www.cmegroup.com/CmeWS/mvc/Margins/OUTRIGHT?1=1&sortField=exchange&sortAsc=true&exchange=NYM&sector=DME%20Products&pageSize=500&pageNumber=1&_=1537972316703",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
  CURLOPT_HTTPHEADER => array(
    "cache-control: no-cache"
  ),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  $status = false;
  $data = "cURL Error #:" . $err;
} else {
  $status = true;
  $data = $response;
}
$json = array('status'=>$status, 'data'=>$data);
header('Content-Type: application/json');
echo json_encode($json, JSON_PRETTY_PRINT);

?>

在HTML上使用jquery lib javascript

<table>
  <thead>
    <tr>
      <th>exchange</th>
      <th>sector</th>
      <th>name</th>
    </tr>
  </thead>
  <tbody id="tbody"></tbody>
</table>
<script>
$.getJSON(getdata.php, function(record){
  if (record.status!=false) {
    var tbody = "<tr><td colspan=3>"+record.data+"</td></tr>";
      $("#tbody").html(tbody);
  }else{
    for (var i = 0; i < record.data.marginRates.length; i++) {
      var tbody = "<tr><td>"+record.data.marginRates[i].exchange+"</td><td>"+record.data.marginRates[i].sector+"</td><td>"+record.data.marginRates[i].name+"</td></tr>";
      $("#tbody").html(tbody);
    }
  }

});
</script>

从网址到PHP表的JSON

2 个答案: