Question

I currently adding an auto reload function in my page to allow user to see the new content without refreshing whole page. This is the first time I'm using Ajax, do advise me if my codes are put at the wrong place.

This is my page's view:

当我的ajax代码重新加载内容时会发生这种情况：

重新加载的数据不会进入表格单元格。

这是我从数据库调用表内容并每30秒刷新一次的方法：

<?php include 'connectdb.php';
$result = mysqli_query($con,"SELECT tbluser.userId, tblorder.userId, tblorder.id, tblorder.from, tblorder.to, tblorder.itemCat, tblorder.itemName, tblorder.quantity, tblorder.size, tblorder.weight, tblorder.date FROM tbluser, tblorder WHERE tbluser.userId=tblorder.userId and tbluser.userLvlId='4'") or die ("Data not found !");
while ($rows =mysqli_fetch_array($result)) {

    $orderid = $rows['id'];
    $userid = $rows['userId'];
    $from = $rows['from'];
    $to = $rows['to'];
    $itemCat = $rows['itemCat'];
    $itemName = $rows['itemName'];
    $quantity = $rows['quantity'];
    $size = $rows['size'];
    $weight = $rows['weight'];
    $date = $rows['date'];

    ?>

    <tr>
        <td align="center" valign="middle"><?php echo $rows['id']; ?></td>
        <td align="center" valign="middle"><?php echo $rows['userId']; ?></td>
        <td align="center" valign="middle"><?php echo $rows['from']; ?></td>
        <td align="center" valign="middle"><?php echo $rows['to']; ?></td>
        <td align="center" valign="middle"><?php echo $rows['itemCat']; ?></td>
        <td align="center" valign="middle"><?php echo $rows['itemName']; ?></td>
        <td align="center" valign="middle"><?php echo $rows['quantity']; ?></td>
        <td align="center" valign="middle"><?php echo $rows['size']; ?></td>
        <td align="center" valign="middle"><?php echo $rows['weight']; ?></td>
        <td align="center" valign="middle"><?php echo $rows['date']; ?></td>
        <td align="center" valign="middle"><a href="edit order.php?userId=<?php  print htmlentities($userid); ?>"><input type="button" value="EDIT" style="width:50px; height:30px; font-size:10px; text-align: center; padding-left:10px; padding-top:8px;"></a></td>
    </tr>
    <?php
}
?>

<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
        setInterval(function () {
        $('#loadhere').load('ordertable.php')
      }, 30000);
    });

这是我的html文件：

<div id="content">
        <div id="table">
            <div id="title">
                <a>ORDER DETAILS</a>
            </div>
            <table id="data" border="2" style=" margin: 0 auto; color:#3b3b3b;" >
    <?php include 'ordertable.php'; ?>

  <thead>
    <tr>
    <div style="height:10px;"></div>
     <th>&nbsp;&nbsp;ORDER ID&nbsp;&nbsp;</th>
      <th>&nbsp;&nbsp;USER ID&nbsp;&nbsp;</th>
      <th>&nbsp;&nbsp;&nbsp;FROM (LOCATION)&nbsp;&nbsp;&nbsp;</th>
      <th>&nbsp;&nbsp;&nbsp;TO (DESTINATION)&nbsp;&nbsp;&nbsp;</th>
      <th>&nbsp;&nbsp;&nbsp;CATEGORY&nbsp;&nbsp;&nbsp;</th>
      <th>&nbsp;&nbsp;ITEM NAME&nbsp;&nbsp;</th>
      <th>&nbsp;QUANTITY&nbsp;</th>
      <th>&nbsp;SIZE&nbsp;</th>
      <th>&nbsp;WEIGHT&nbsp;</th>
      <th>&nbsp;DATE&nbsp;</th>
      <th>EDIT</th>
    </tr>
  </thead>

  <tbody>
    <div id="loadhere">

    </div>
</tbody>
</table>
          </div>
        </div>

如果您不清楚我的问题是什么，请向我询问更多详情。

Answer 1

你试图在表格中设置一个div，这是不可能的。你可以解决它来改变这个：

<tbody>
    <div id="loadhere">
    </div>
</tbody>

要

<tbody id="loadhere">
    //Here goes all the <tr><td></td></tr> etc
</tbody>

将您的JavaScript代码更改为

$(document).ready(function() {
    setInterval(function () {
        $.get("ordertable.php", function(data) {
            $("#loadhere").html(data);
        });
    }, 30000);
});

希望这有效！

Having issue loading content using Ajax

1 个答案: