Question

我正在创建一个非常基本的拍卖页面，我现在已经相当远了。但是，如果出价已通过AJAX成功发布，我想更新“当前出价”的值。

以下是我的一些代码：

此代码从MySQL检索数据并填充页面。

    $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" . $row['ID'] . "'>
            <input type='hidden' name='id' value='" . $row['ID'] . "' />
            <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: £<div class='nospace' id='" . $row['ID'] . "'>" . $row['CurrentBid'] . "</div></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'><input type='submit' name='submit' value='Place Bid!' /></div>";
    echo "</div></form>";
  }
echo "</table>";

我的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).find('input[name="bid"]').val();
            var currentbid = $('#'+id).text();

            if (bid > currentbid)
            {
                alert("Bid is greater than current bid");   
            }
            else
            {
                return false;   
            }

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

        }); 
    });

警报仅用于测试目的。但是jQuery会根据表单中提交的出价来检查当前的出价。

如果出价已成功发布，那么我想更新当前出价中显示的内容，但目前您必须手动刷新页面才能显示。

我尝试添加

window.location.reload();

关于AJAX的成功部分，但没有任何反应。

任何人都可以指出我正确的方向，或者如果您知道更好的方法，那么只需刷新页面，请告诉我。

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

Answer 1

你永远不会进入你的ajax调用的success函数：你已经将dataType设置为json所以jQuery期望json回来。但是，你要发回html。

您应该从ajax调用中删除dataType: "json",：

$.ajax({
        type: "POST",
        url: "auction-handler.php",
        // Or remove this, or send json back
        // dataType: "json",
        data: {bidname: bidname, bid: bid, id: id},
        success: function(data){
            // There is no need for this...
            // window.location.reload();
            console.log(data);
        }
    });

请注意，使用ajax的优点是您可以替换部分内容。因此，您不必重新加载整个页面，只需更新要更新的部分即可。

Answer 2

在您的ajax响应中，您只需将新的出价值传递给元素，就无需刷新整个页面。在你的ajax函数中返回正确的值，然后替换它。

成功：功能（数据） { （ '＃元件-ID'）的html（数据）;

Answer 3

在ajax成功时将data.bid（由服务器发送）分配给currentbid。

  $.ajax({
                type: "POST",
                url: "auction-handler.php",
                data: {bidname: bidname, bid: bid, id: id},
                success: function(data) {
                    currentbid = data.bid   // bid from server    
                }
            });

如何在成功发布AJAX后更新值/刷新页面

3 个答案: