Ajax顯示消息

有這段令人驚歎的代碼，它工作得很好，但問題是我總是得到具有相同消息的新DIV，如何更改它以便它出現在同一個地方？ msgsrv.php文件只是一個echo "Test Message";，但它會從MySQL DB中提取數據。所以我得到的是測試消息，然後在下一行測試消息，我希望有新消息替換舊消息。Ajax顯示消息

<html> 
<head> 
    <title>Auction</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script> 

    <style type="text/css" media="screen"> 
     body{ background:#000;color:#fff;font-size:.9em; } 
     .msg{ background:#aaa;padding:.2em; border-bottom:1px #000 solid} 
     .old{ background-color:#246499;} 
     .new{ background-color:#3B9957;} 
    .error{ background-color:#992E36;} 
    </style> 

    <script type="text/javascript" charset="utf-8"> 
    function addmsg(type, msg){ 
     /* Simple helper to add a div. 
     type is the name of a CSS class (old/new/error). 
     msg is the contents of the div */ 
     $("#messages").append(
      "<div class='msg "+ type +"'>"+ msg +"</div>" 
     ); 
    } 

    function waitForMsg(){ 
     /* This requests the url "msgsrv.php" 
     When it complete (or errors)*/ 
     $.ajax({ 
      type: "GET", 
      url: "msgsrv.php", 

      async: true, /* If set to non-async, browser shows page as "Loading.."*/ 
      cache: false, 
      timeout:50000, /* Timeout in ms */ 

      success: function(data){ /* called when request to barge.php completes */ 
       addmsg("new", data); /* Add response to a .msg div (with the "new" class)*/ 
       setTimeout(
        waitForMsg, /* Request next message */ 
        1000 /* ..after 1 seconds */ 
       ); 
      }, 
      error: function(XMLHttpRequest, textStatus, errorThrown){ 
       addmsg("error", textStatus + " (" + errorThrown + ")"); 
       setTimeout(
        waitForMsg, /* Try again after.. */ 
        15000); /* milliseconds (15seconds) */ 
      } 
     }); 
    }; 

    $(document).ready(function(){ 
     waitForMsg(); /* Start the inital request */ 
    }); 
    </script> 
</head> 
<body> 
    <div id="messages"> 
     <div class="msg old"> 
      Last Bid is: 
     </div> 
    </div> 
</body> 
</html>

來源

2013-06-22 user974435

，因爲它說，「追加」將追加內容元素，而html的（）將改變元素的整個內部HTML和您設定的內容替換。

更換

$("#messages").append(
     "<div class='msg "+ type +"'>"+ msg +"</div>" 
    );

有：

$("#messages").html(
     "<div class='msg "+ type +"'>"+ msg +"</div>" 
    );

來源

2013-06-22 14:29:36

非常感謝你!!!! X – user974435

回答

相關問題