値を更新する方法/ AJAX投稿が成功した後のページを更新する

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は現在の入札を、フォームに送信された入札と照合してチェックします。

入札が正常に転記された場合、現在の入札に表示されているものを更新したいが、現時点ではこのページを手動で更新して表示する必要があります。

私はAJAXの成功セクションの

window.location.reload(); 

を追加しようとしたが、何も起こりません。

誰かが正しい方向に私を指し示すことができますか、これを行うより良い方法を知っていれば、ページをリフレッシュするだけです。私に教えてください。

ありがとうございました。もう情報が必要な場合は、私に知らせてください。

Answer 1

あなたはayaxコールのsuccess機能に入ることはありません。dataTypeをjsonに設定しているので、jQueryがjsonを返すことを期待しています。しかし、あなたはhtmlを送り返しています。

あなたのAJAX呼び出しからdataType: "json",を削除する必要があります。AJAXを使用する利点は、あなたがコンテンツの一部を置き換えることができることであることを

$.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); 
     } 
    }); 

注意。したがって、ページ全体をリロードする必要はなく、更新したいセクションだけを更新することができます。

Answer 2

あなたのajaxレスポンスでは、新しい入札単価を要素に渡すだけで、ページ全体を更新する必要はありません。あなたのajax関数で適切な値を返し、それを置き換えます。

成功：機能（データ） { （ '＃element-id'）.html（data）;

 } 

Answer 3

（サーバーによって送信される）は、ajaxの成功のcurrentbidに割り当てます。

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