如何在从服务器接收的表中显示数据

时间:2019-11-01 17:18:03

标签: javascript php jquery html html-table

我有一个页面index.html(带有表格和表格)和一个php文件名indexx.php 当我在index.html中填写数据时,我单击获取数据按钮并请求转到我的文件indexx.php。现在indexx.php从HTML页面获取数据并使用post方法请求一些视频,我已经成功接收了Json数据。但是我想以表格格式在HTML页面中显示此数据。

index.html

<head>
</head>
<body>




<form action="indexx.php" method="POST" >
<div class="container" style="width:100%;">
<center></center>
</div>
<div class="container" style="width:100%;">
<label for="userId"><b>UserId</b></label>
<input type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

<label for="categoryId"><b>categoryId</b></label>
<input type="number" placeholder="Enter categoryId" name="categoryId" required>

<button type="submit" >GET DATA</button>
</div>

</form>
<div class="wrapper">
<div class="profile">
  <table id= "userdata" width="50%" border="2">
    <thead>
      <th>VIDEO NAME</th>
      <th>DATE</th>
      <th>TIME</th>           
      <th>DURACTION</th>
      <th>LIVE STATUS</th>
      <th>LINK</th>
    </thead>
  <tbody>
    <!-- here you will loop through the data you have received from curl and fill it in the tbody, and this entrie thing will be done when the page loads -->
  </tbody>
</table>

</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>
</body>
</html>

我的indexx.php


<?php
$userId = $_POST['userId'];
$categoryId = $_POST['categoryId'];
$url = 'https://www.serversample.php';
$data = array('userId' => $userId, 'categoryId' => $categoryId);

// use key 'http' even if you send the request to https://...
$options = array(
    'http' => array(
        'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
        'method'  => 'POST',
        'content' => http_build_query($data)
    )
);
$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);
if ($result === FALSE) { /* Handle error */ }

print($result);

?>

我从其他服务器收到的

JSON文件示例

{"yourvideo":[{"Id":"55","videoName":"CLASS-3","date":"2 AUG 2015","time":"9:58 PM","video":"sCLKbhghghhgb","image":"https://img.youtube.com/vi/sjjZB4jjuhwc/0.jpg","videoType":"video","videoDuration":"02:08:88","liveStatus":"offline","testId":"0"},{"Id":"6985","videoName":"CLASS-4","date":"29 AUG 2018","time":"8:52 PM","video":"gtghnhyv","image":"https://img.youtube.com/vi/uygbnhjhg/0.jpg","videoType":"video","videoDuration":"02:81:18","liveStatus":"offline","testId":"0"}]}

现在我想以表格格式在index.html页面中显示此文件

2 个答案:

答案 0 :(得分:0)

您可以使用

json_encode($result, true);

它将返回与数据关联的数组。使用print_r进行打印,并在没有第二个参数的情况下进行检查,您将获得带有键的对象。

答案 1 :(得分:0)

首先,不要使用.html文件,而应使用.php:index.php(您当前的index.html文件) 不需要处理php文件(您正在使用indexx.php),因为一切都可以在index.php中完成,这是一个简单的示例:

<form method='POST'>
    <input type='hidden' name='formSubmitted' value=1>

    <label for="userId"><b>UserId</b></label>
    <input type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

    <label for="categoryId"><b>categoryId</b></label>
    <input type="number" placeholder="Enter categoryId" name="categoryId" required>

    <button type="submit" >GET DATA</button>
</form>

<!-- form processing STARTS here -->

<?php

if (isset($_POST['formSubmitted'])) {
    print_r($_POST); // you know what to do with this
}