javascript - 如何使用ajax刷新并保留表单数据

Question

我正在制作现场讨论表。该页面从 MySQL 加载线程，并通过 AJAX 每 4 秒刷新一次。在每个线程的最后一条评论之后，有一个用于评论的文本输入(非常类似于 Facebook)。

一切正常，除了当用户在输入中写入并且页面刷新时，消息消失了。安全和隐私是这个项目的主要目标，这就是我不想使用 cookie 的原因。我尝试了很多解决方案，并搜索了几个小时来寻找解决方案，但似乎没有任何效果。

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 时，关闭 PHP 标签并使用 <?= $variable ?> 会更容易/更易读。如果您需要在 HTML 中放置 PHP 变量。

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 步:在针对容器 div 的脚本中调用 PHP 更新函数

您需要通过 $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:我没有测试这段代码，只是为了向您展示主要思想。

编辑:更正变量名称并添加注释。