PHP MySQL jQuery / AJAX问题

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 ”字段中重复这样重复：

正常：

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请求的URL回显整个HTML页面。 这就是它引入一个全新页面并将其替换为$('#output') 。 您可以在接收AJAX请求的页面上发布代码吗？

Answer 2

您的AJAX请求将转到index.php。 因此返回的数据是整个index.php页面。 这就是为什么一切都在重复的原因。

我建议您创建另一个您的ajax代码正在调用的PHP文件，并只生成要在该PHP文件中返回的HTML。

Answer 3

如果您将请求发送到同一页面，则应检查它的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();

}

编辑

对于每个类别，您的价格div都有id output因此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);

       }
     });
 }