Ajaxを使用してコンテンツを読み込む際に問題が発生する

Question

現在、私のページに自動リロード機能を追加して、ページ全体を更新せずに新しいコンテンツを見ることができます。私がAjaxを使用しているのはこれが初めてのことです。私のコードが間違った場所に置かれた場合は、私に助言してください。

これは私のページの図である：これは私の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> 

JavaScriptコードは、この作品

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

希望に変更し

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

へ！