JQuery GET檢索不需要的HTML

我正在使用php cart類，並且添加了一些jquery來在用戶單擊添加產品時更新div。JQuery GET檢索不需要的HTML

我遇到的問題是，當產品被添加時，產品列表被複制到html頁面（屏幕截圖），雖然它不在源代碼中。

默認頁：

當添加任何產品，這是結果：

正如你可以看到車被更新但會出現一套重複的產品。

這裏的JQuery的，我使用：

<script type="text/javascript"> 
function getItem(id) 
{ 
$.ajax({ 
type: "GET", 
url: 'index2.php', 
data: "action=add&id=" + id, 
success: function(data) { 
     $('#info').html(data); 
} 

}); 

} 
</script>

並與ID信息股利之間的PHP：

<div id="info"> 
<?php 
if(!empty($items)){ 
    echo ' 
    <table style="border:2px solid #cc0000;width:400px"> 
    <tr> 
     <td><strong>Item</strong></td> 
     <td><strong>Price</strong></td> 
     <td><strong>Quantity</strong></td> 
     <td><strong>Total</strong></td> 
     <td></td> 
    </tr>'; 

    $total = 0; 
    foreach($items as $id=>$qty) { 
     foreach($products as $product) { 
      if($product['id'] == $id) 
       break; 
     } 
     if(!isset($product['name'])) 
      continue; 

     echo ' 
     <tr> 
      <td>' . $product['name'] . '</td> 
      <td>$' . $product['price'] . '</td> 
      <td>' . $qty . '</td> 
      <td>$' . ($product['price'] * $qty) . '</td> 
      <td><a href="?action=remove&id=' . $id . '">[x Remove]</a></td> 
     </tr>'; 

     $total += $product['price'] * $qty; 
    } 

    echo ' 
    <tr> 
     <td><a href="?action=empty">[Empty Cartt]</a></td> 
     <td colspan="4" align="right"><strong>Grand Total: $' . $total . '</strong></td> 
    </tr> 
    </table>'; 
} 
else{ 
    echo '<p style="color:#990000;">Your shopping cart is empty.</p>'; 
} 
?> 
</div>

我不知道是什麼原因造成這一點。

任何解決方案將不勝感激！

來源

2017-07-15 Abu Nooh

「index2.php」的代碼是什麼？ –

上面的html來自index2。該腳本位於同一頁面中。 –

因此，您的ajax請求返回頁面中已有的相同數據。你能指望什麼？ –

看起來你正在渲染整個頁面的副本。請注意重複的標題。

解決方案是確保index2.php（或任何端點是最好的）只包括信息模板，或者你有意重新渲染整個視圖（並且應該設置父容器的html，而不是內在的一個）。

來源

2017-07-15 19:01:40

我怎麼才能得到那部分？我以爲只有#info div纔會被檢索？ –

如果您只需要信息模板，則需要僅顯示該模板的端點。它看起來像你得到整個頁面。 JQuery不知道你想要渲染頁面的哪一部分。您可以使用額外的查詢來僅指定所需的HTML部分，但這隻隱藏了您發送的HTML比您需要的更多的事實;它不能解決問題。 –

謝謝你的回覆，如何做到這一點的任何例子？ –

你將使用相同的id每次另一分區內#info格，儘量使用replaceWith()代替，使河畔taht你剛剛一個DIV在同一個時間同一個ID，如：

$('#info').replaceWith(data);

希望這會有所幫助。

來源

2017-07-15 19:14:38

感謝您的支持，但replaceWith不斷在下面添加更多表格。所以沒有工作 –

JQuery GET檢索不需要的HTML

回答

相關問題