jQuery / AJAX数据未发布

Question

我正在尝试在我正在工作的网站上创建一个非常基本的拍卖页面。 我一直在努力解决问题，但现在有些困难。

数据存储在MySQL表中，该数据具有图像链接，ID和当前出价。

然后，我在PHP / HTML中检索数据，示例如下：$ result = mysqli_query（$ con，“ SELECT * From Auction WHERE category ='Bathroom'ORDER BY ID DESC”）;

while($row = mysqli_fetch_array($result))
  {
    echo "<form name='auction' id='auction'><div class='auction-thumb'>
                <div class='auction-name'>" . $row['Item'] . "</div>";
            echo "<img class='auction' src='" . $row['ImagePath'] . "' />";
            echo "<div class='auction-bid'>Current Bid: £" . $row['CurrentBid'] . "</div>";
            echo "<div class='auction-bid'>Your Name: <input type='text' class='bidder' name='bidname'/></div>";
            echo "<div class='auction-bid'>Your Bid: <input type='text' class='auction-text' name='bid'/></div>";
            echo "<div class='auction-bid'><button name='submit' id='submit' value='" . $row['ID'] . "' type='submit'>Place Bid!</button></div>";
    echo "</div></form>";
  }
echo "</table>";

这段代码绝对可以遍历所有项目。 以及用于输入名称和出价的文本框（目前我不使用该名称做任何事情）。

然后，我的jQuery如下所示：

$(document).ready(function(){
        $('#auction').submit(function(){
            var id = $('#submit').val();
            var bidname = $('input[name=bidname]').val();
            var bid = $('input[name=bid]').val();


            $.ajax({
            type: "POST",
            url: "auction-handler.php",
            dataType: "json",
            data: {bidname: bidname, bid: bid, id: id},
            success: function(){
            }
        });
        return true;

        }); 
    });

同样，这是非常基本的，我现在还不关心验证。

最后是我的PHP代码的片段：

$bidname = $_POST['bidname'];
$bid = $_POST['bid'];
$id = $_POST['id'];

$query = "UPDATE auction SET CurrentBid = '$bid' WHERE ID = '$id'";

mysqli_query($con, $query) or die(mysqli_error());


mysqli_close($con);

我的问题是，当我单击提交时，什么都没有发生。 所有变量名和值都放入浏览器地址栏中，页面似乎刷新了。

数据不会发布，当我使用Firebug进行调试时，我只会出现一个红叉，并且不会给我任何错误。

通过查看我的代码，我知道没有遵循最佳实践，但是我只是想使某些事情起作用，然后在以后进行整理。

如果有人能指出正确的方向，那将是很大的帮助。

谢谢，如果您需要更多信息，请告诉我。

Answer 1

您需要重新编写一下：ID必须是唯一的，并且当您遍历项目时，一遍又一遍地将相同的ID分配给不同形式的元素。

因此，当您尝试获取提交处理程序中的值时，jQuery不知道要获取哪个值（它可能获取具有该ID的第一个元素的值）。

您应该先将ID更改为例如类，然后在提交处理程序中序列化（例如...）提交的表单$(this) ，以获取正确的数据。

Answer 2

首先：您需要重写您的form元素，每个元素应具有唯一的ID以区分相应的元素。

<?php while($row = mysqli_fetch_array($result)){ ?>
     <form name='auction' id='auction<?php echo $row['ID'] ?>'>
        <input type='hidden' name='id' value='<?php echo $row['ID'] ?>'>
        <div class='auction-thumb'>
            <div class='auction-name'><?php echo $row['Item'] ?></div>
            <img class='auction' src='<?php echo $row['ImagePath'] ?>' />            
            <div class='auction-bid'>Current Bid: £<?php echo row['CurrentBid'] ?></div>
            <div class='auction-bid'>Your Name: <input type='text' class='bidder' name='bidname'/></div>
            <div class='auction-bid'>Your Bid: <input type='text' class='auction-text' name='bid'/></div>
            <div class='auction-bid'>
                <input type='submit' name='submit' value='Place Bid!'>
            </div>
        </div>
    </form>

并将您的jquery代码替换为

$(document).ready(function(){
    $('form[name="auction"]').submit(function(){
        var id = $(this).find('input[name="id"]').val();
        var bidname = $(this).find('input[name="bidname"]').val();
        var bid = $(this).('input[name="bid"]').val();

        $.ajax({
           type: "POST",
           url: "auction-handler.php",
           dataType: "json",
           data: {bidname: bidname, bid: bid, id: id},
           success: function(){
           }
        });
        return false;
    }); 
});

Answer 3

在ajax中添加以下键以跟踪错误。

  $.ajax({
    url: "auction-handler.php",
    type: "POST",
    dataType: "json",
    data: {bidname: bidname, bid: bid, id: id},
    crossDomain:true,
    success: function(result){ console.log(result);   }
    error: function(httpReq,status,exception){
        alert("error - " +status+" "+exception);
    }
});