获取JSON响应并将其放入html表

时间:2017-03-23 04:38:47

标签: php json api aws-api-gateway

修改

使用我用来获取下面代码的第一部分的名为Postman的程序,$ curl位:

<?php

$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.extensopro.com/machines/list? customerid=????&apikey=??????????????????????????????????????",
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(
"authorization: AWS4-HMAC-SHA256 Credential=/20170322/us-east-1/execute-api/aws4_request, SignedHeaders=content-type;host;x-amz-date, Signature=38e3277546829fd58be65805df8832c51b6a865c9df7279e80c408bd3116587d",
 "cache-control: no-cache",
 "content-type: application/x-www-form-urlencoded",
 "postman-token: 4aafd978-bda3-88ef-0db2-326b91880549",
 "x-amz-date: 20170322T095504Z"
),
));

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

curl_close($curl);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
  <table border="1" cellpadding="8" cellspacing="0" id="cteTable">
    <tr>
       <th>ID</th>
       <th>MANUFACTURER</th>
       <th>YEAR</th>
    </tr>
</table>
<script type="text/javascript">

$(document).ready(function () {
$.getJSON(url,
function (json) {
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].ID + "</td>");
        tr.append("<td>" + json[i].MANUFACTURER + "</td>");
        tr.append("<td>" + json[i].YEAR + "</td>");
       $('table').append(tr);
    }
   });
});
$('#cteTable').append(tr)
</script>
</body>
</body>
</html>

我知道这不对,但我对编码没有任何了解,上面的代码部分来自此post以及此post

邮递员的回复显示了大约40个标题,我是否必须让上面的代码中的每个人都能使用这个或者只是我想要的?

以下是:

的输出
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}


{"DATA":[{"UNITS":8,"CONDITION":{"NAME":"","VALUE":""},"UNITTYPE":"Stations","IMPRESSIONS":205000000,"MANUFACTURER":"Heidelberg","MODEL":"SM 102","HASREFERENCE":true,"HASSIZE":1,"YEAR":1994,"REFERENCE":"8187","URL":"/Machines/Heidelberg/44715-50082/Heidelberg-SM-102-8.html","SIZE":{"HEIGHT":1020,"HASWIDTH":1,"WIDTH":720,"NAME":"720x","HASHEIGHT":1},"HASIMAGE":1,"STATUSES":[{"NAME":"In Production","ID":8}],"CATEGORY":"Press","IMAGE":{"ONERROR":"failover(this, { imagegeneratorid: '219610_60', onerror1 : 'https://s3-eu-west-1.amazonaws.com/presscity-thumbnails/18/60/x60_heidelberg-sm102-219610.jpg', onerror2: 'http://pdf.presscity.com/localStorage_s3.cfm?orgFile=18_6535fb358939919cb4a37ac9f013b895.jpg&filename=x60_Heidelberg-SM102-219610.jpg&size=60&host=api.extensopro.com&nPictureNo=219610&nMachineNo=44715'});","ID":219610,"SRC":"http://cdn.presscity.com/18/60/x60_heidelberg-sm102-219610.jpg"},"SPECIFICATIONWEBSITE":"","SUBCATEGORY":"Sheetfed","NAME":"Heidelberg SM 102 8","ID":44715,"AVAILABLILITY":"","HASYEAR":1,"HASPRICE":0,"SPECIFICATION":"Straight Machine No Perfecting\r\nStream Feeder, CPC 1-03, CP Tronic, Autoplate, Alcolor damping, Auto Ink roller wash, \r\nAuto Blanket Wash, Non-stop feeder & delivery, Preset Feeder, Diagonal Register, Powder Spray, \r\n"}],"INFO":{"RECORDCOUNT":1}}

所以我知道服务器的输出正在工作,我现在如何解析这个输出并将其放入我页面上的表中,如上所述,我是否必须使用输出的所有字段或只是那些我想要的?

2 个答案:

答案 0 :(得分:0)

HTML页面和您用来从页面正文填充表格的Javascript需要是同一HTML页面的一部分。如果情况如此,那么你发布的内容并不清楚。尝试替换<script>...</script>  PHP文件中的代码与我在下面的内容。

 <!doctype html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
 </head>
    <body>
      <table id="cteTable">
        <tr>
           <th>Account Name</th>
           <th>Advisor</th>
           <th>Links</th>
        </tr>
  </table>
<script type="text/javascript">

    $(document).ready(function () {
$.getJSON(url,
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].User_Name + "</td>");
            tr.append("<td>" + json[i].score + "</td>");
            tr.append("<td>" + json[i].team + "</td>");
           $('table').append(tr);
        }
       });
    });
    $('#cteTable').append(tr)
</script>
</body>
</html>

答案 1 :(得分:0)

试试这个jquery datatables https://datatables.net/