Question

我有jQuery的問題。

這是我的jQuery代碼：

function UpdateRecord(id) 
    { 
     jQuery.ajax({ 
     type: "GET", 
     url: "index.php", 
     data: 'id='+id, 
     cache: true, 
     success: function(data) 
     { 
     $('#output').html(data); 

     } 
    }); 
} 

UpdateRecord（ID）從這裏得到的數據：

echo"<select>"; 
    foreach($products->fetch_products($id) as $product) 
    { 
     $price = $product->price; 
    echo"<option value = $product->id onclick=\"UpdateRecord($product->id)\">$product->p_name</option>"; 
    } 
    echo"</select>"; 

這一塊的HTML和PHP代碼，其中新的結果應該是< div id="output"></div>：

$i = 0; 
    foreach($products->fetch_products($id) as $pricer){ 
    if ($i==1) break;  
    echo"<td>"; 
    echo"<center>"; 
    echo("<div id=\"output\"><p>$pricer->price</p></div>"); 
    echo"</center>"; 
    echo"</td>"; 
    $i++; 
    } 

最後這是PHP函數返回的價格：

public function update_price($id){ 

     $stmt = $this->connect()->prepare("SELECT `price` FROM `products` WHERE id=?"); 

     $stmt->bindValue(1,$id); 

     $stmt->execute(); 

     $row = $stmt->fetchAll(PDO::FETCH_OBJ); 

     //echo json_encode($row); 

     foreach($row as $data){ 

      echo $data->price; 

     } 
} 

我測試了我的PHP函數和它的正常工作。

問題是，當我點擊我的dropdwon名單上，並選擇產品的整個table在 「Price」 現場像這樣重複aggain：

正常：

http://i44.tinypic.com/34473mp.jpg

問題：

http://i43.tinypic.com/3449xmw.jpg

編輯

這個table：

<tbody> 

<?php 




foreach($category->fetch_category() as $data){ 

    $id = $data->id; 

    echo"<tr>"; 
    echo"<td>"; 
    echo"<center>"; 
    echo"<input type=\"hidden\" value=\"$data->id\" />"; 
    echo"<p><strong>".$data->cat_name."</strong></p>"; 
    echo"</center>"; 
    echo"</td>"; 
    echo"<td>"; 
    echo"<center>"; 

    echo"<select>"; 
    foreach($products->fetch_products($id) as $product) 
    { 
     $price = $product->price; 
    echo"<option value = $product->id onclick=\"UpdateRecord($product->id)\">$product->p_name</option>"; 
    } 
    echo"</select>"; 

    echo"</center>"; 
    echo"</td>"; 

    echo"<td>"; 
    echo"<center>"; 
    echo"<input class=\"input-mini\" type=\"text\" value=\"1\"/>"; 
    echo"</center>"; 
    echo"</td>"; 
    $i = 0; 
    foreach($products->fetch_products($id) as $pricer){ 
    if ($i==1) break;  

    echo"<td id=\"$pricer->category_id\">"; 

    echo"<center>"; 
    echo("<div id=\"output\"><p>$pricer->price</p></div>"); 
    echo"</center>"; 
    echo"</td>"; 
    $i++; 
    } 
    echo"</tr>"; 
} 

?> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
<td>Total: </td> 
</tr> 

</tbody> 

提前感謝！我正在努力解決這一整天...

Answer 1

如果你發送請求到同一頁面，你應該檢查它的ajax調用，併爲html的所需部分工作這就是你得到你的index.php的整個html我建議你在ajax調用中傳遞另一個參數和頂部的你index.php檢查呼叫

function UpdateRecord(id) 
    { 
     jQuery.ajax({ 
     type: "GET", 
     url: "index.php", 
     data: 'id='+id+'&ajax_call=1', 
     cache: true, 
     success: function(data) 
     { 
     $('#output').html(data); 

     } 
    }); 
} 

index.php

if($_REQUEST['ajax_call']){ 
$i = 0; 
    foreach($products->fetch_products($id) as $pricer){ 
    if ($i==1) break;  
    echo"<td>"; 
    echo"<center>"; 
    echo("<div id=\"output\"><p>$pricer->price</p></div>"); 
    echo"</center>"; 
    echo"</td>"; 
    $i++; 
    } 
die(); 

} 

編輯

對於每個類別你有id爲output因此價格DIV的ID複製試試這個

foreach($products->fetch_products($id) as $product) 
    { 
     $price = $product->price; 
    echo"<option value = $product->id onclick=\"UpdateRecord($product->id,$data->id)\">$product->p_name</option>"; 
    } 
    echo"</select>"; 

    echo"</center>"; 
    echo"</td>"; 

    echo"<td>"; 
    echo"<center>"; 
    echo"<input class=\"input-mini\" type=\"text\" value=\"1\"/>"; 
    echo"</center>"; 
    echo"</td>"; 
    $i = 0; 
    foreach($products->fetch_products($id) as $pricer){ 
    if ($i==1) break;  

    echo"<td id=\"$pricer->category_id\">"; 

    echo"<center>"; 
    echo("<div id=\"output-$data->id\"><p>$pricer->price</p></div>"); 
    echo"</center>"; 
    echo"</td>"; 
    $i++; 
    } 

JS

function UpdateRecord(id,cat_id) 
    { 
     jQuery.ajax({ 
     type: "GET", 
     url: "index.php", 
     data: 'id='+id, 
     cache: true, 
     success: function(data) 
     { 
     $('#output-'+cat_id).html(data); 

     } 
    }); 
} 

Answer 2

您可能會迴應收到AJAX請求的URL中的整個HTML頁面。 這就是它帶來一個全新的一頁，並在$('#output')的地方裝上它的原因。你能發佈收到AJAX請求的頁面的代碼嗎？

Answer 3

您的AJAX請求將要index.php。所以返回的數據就是整個index.php頁面。這就是爲什麼一切都在重複。

我會建議創建另一個PHP文件，您的ajax代碼正在調用，並生成您想要在該PHP文件中返回的HTML。