如何使用Ajax刷新並保持表單數據

Question

我正在現場討論形式。該頁面從MySQL加載線程，並通過AJAX每4秒刷新一次。在每個線程的最後評論之後，有一個文本輸入用於評論（與Facebook非常相似）。

一切正常，只是當用戶在輸入和頁面刷新寫作，信息消失。安全和隱私是這個項目的主要目標，這就是爲什麼我不想使用cookies。我已經嘗試了很多解決方案，並花了幾個小時尋找解決方案，但似乎沒有任何工作。

1. 每次頁面刷新時是否可以解決$_post？
2. 在緩存中輸入值和$_session或本地存儲檢索它們的情況下，任何人都可以提出一個更具體的做法？即：在那裏把聽衆:)
3. 我試圖使該防止重新加載頁面，如果輸入的值是「」不同的功能，但即使這樣也沒有爲我工作。

這裏是我的刷新代碼：

<script type="text/javascript"> 
    var PHP = "msgboard.php"; 

    function updateShouts(){ 
     $('#msgboard').load(PHP);  
    } 

    window.setInterval("updateShouts()", 4000); 
</script> 

這裏是主要的PHP函數：提前

while($row = mysql_fetch_array($resultados)) { 

    echo '<div class="post"> 
      <div class="user"><b>'.$row["user"].'</b></div>'; 
    echo ' <div class="txt">'.$row["msg1"].'</div> 
      </div>'; 

     $sql2="SELECT * FROM table WHERE masterid = '".$row['id']."'ORDER BY id ASC"; 
     $resultados2 = mysql_query($sql2); 
     while($row2 = mysql_fetch_array($resultados2)) { 
      echo '<div class="comment"> 
        <div class="txt"><b>'.$row2['user'].'</b>'; 
      echo ' '.$row2['msg1'].'</div> 
        </div>'; 
     } 

    echo '<div class="commentform"> 
      <form action="board.php" method="post"> 
      <input type="text" size="75" name="message" id="message1"> 
      <input type="hidden" name="masterid" value="'.$row['id'].'"> 
      <input type="submit" name="Submit" value="Enviar"></form> 
     </div>' ; 
} 

謝謝！

Answer 1

由於@aziz在評論中指出的，如果你只是想更新的評論，你只需要更新頁面的這一部分。

第1步：添加一個容器的評論，所以你可以針對更新到容器

你會發現現在有其中將包含所有的註釋代碼一個新的div <div id="comments_contaner">。

此外，當您輸出HTML時，如果您需要在HTML中放置PHP變量，則關閉PHP標記並使用<?= $variable ?>會更容易/更容易。

msgboard.php：

<? 
while($post = mysql_fetch_array($resultados)) 
{ 
?> 
    <div class="post"> 
     <div class="user"><b><?= $post["user"]?></b></div> 
     <div class="txt"><?= $post["msg1"]?></div> 
    </div> 
    <div id="comments_contaner"> 
<? 
    // This code can be ommited as you can just call updateShouts() upon page load to fetch the comments 
    $comments = mysql_query("SELECT * FROM table WHERE masterid = '{$post['id']}' ORDER BY id ASC"); 
    while($comment = mysql_fetch_array($comments)) 
    { 
?> 
     <div class="comment"> 
      <div class="txt"><b><?= $comment['user'] ?></b> <?= $comment['msg1'] ?></div> 
     </div> 
<? 
    } 
?> 
    </div> 
    <div class="commentform"> 
     <form action="board.php" method="post"> 
      <input type="text" size="75" name="message" id="message1"> 
      <input type="hidden" name="masterid" value="<?= $post['id'] ?>"> 
      <input type="submit" name="Submit" value="Enviar"> 
     </form> 
    </div> 
<? 
} 
?> 

第2步：創建一個PHP函數來更新評論

此功能只輸出的註釋，這將需要masterid作爲參數知道輸出哪些評論。

updateComments.php：

<? 
    $masterid = $_GET['masterid'] 
    $comments = mysql_query("SELECT * FROM table WHERE masterid = '{$masterid}' ORDER BY id ASC"); 
    while($comment = mysql_fetch_array($comments)) 
    { 
?> 
     <div class="comment"> 
      <div class="txt"><b><?= $comment['user'] ?></b> <?= $comment['msg1'] ?></div> 
     </div> 
<? 
    } 
?> 

第3步：調用PHP更新功能在你的腳本針對div容器

您需要將$row['id']傳遞作爲一個參數URL

<script type="text/javascript"> 
    var PHP = "updateComments.php?masterid=<?= $post['id']?>"; 

    function updateShouts(){ 
     $('#comments_contaner').load(PHP);  
    } 

    window.setInterval("updateShouts()", 4000); 
</script> 

PD：我還沒有測試過這個代碼，它只是向你展示主要思想。

編輯：更正的變量名稱和添加的評論。

Answer 2

Perhaphs你應該看看有狀態的HTTP連接。因此，無論何時在服務器端添加新消息到板上，都會通知所有客戶端。這樣，您不必不必要地刷新頁面。 HTML5支持可以實現的Web套接字。這裏有一些鏈接我跨過來可能對您有用：

Create Bi-directional connection to PHP Server using HTML5 Web Sockets Wikipedia Page on WebSocket

socketo.me