如何阻止聊天用户选择表单提交后刷新，消息表单提交后正常刷新？

核心思路是用PHP Session保存当前选中的聊天对象ID，页面刷新时从Session读取状态，自动恢复选中状态；同时在消息提交表单中携带该ID，确保提交后仍能保留会话状态。

具体实现步骤 #

1. 初始化Session并处理表单提交 #

在页面顶部开启Session，处理用户选择聊天对象和发送消息的请求：

<?php
session_start();

// 处理选择聊天对象的请求
if (isset($_POST['select_user'])) {
    $_SESSION['chat_with'] = intval($_POST['user_id']);
    // 重定向避免表单重复提交
    header("Location: " . $_SERVER['PHP_SELF']);
    exit;
}

// 处理发送消息的请求
if (isset($_POST['send_message']) && isset($_SESSION['chat_with'])) {
    $message = trim($_POST['message']);
    $target_user_id = $_SESSION['chat_with'];
    
    // 这里写插入消息到数据库的逻辑
    // 示例：mysqli_query($conn, "INSERT INTO messages (from_id, to_id, content) VALUES ('{$_SESSION['user_id']}', '{$target_user_id}', '{$message}')");
    
    // 发送完成后刷新页面加载新消息
    header("Location: " . $_SERVER['PHP_SELF']);
    exit;
}
?>

2. 生成带选中状态的用户列表 #

循环生成用户选择表单时，对比Session中的ID，给当前选中的用户添加高亮样式：

<!-- 左侧用户列表 -->
<div class="user-list">
    <?php
    // 假设$users是从数据库查询到的用户数组
    while ($user = mysqli_fetch_assoc($users)) {
        $active_class = (isset($_SESSION['chat_with']) && $_SESSION['chat_with'] == $user['id']) ? 'active' : '';
    ?>
    <form method="post" class="user-item <?php echo $active_class; ?>">
        <input type="hidden" name="user_id" value="<?php echo $user['id']; ?>">
        <button type="submit" name="select_user">
            <?php echo htmlspecialchars($user['username']); ?>
        </button>
    </form>
    <?php } ?>
</div>

添加CSS高亮选中状态：

.user-item.active button {
    background-color: #2563eb;
    color: white;
    border-radius: 4px;
}

3. 生成消息发送表单（仅当选中用户时显示） #

只在有选中用户时展示聊天区域和发送表单，同时用隐藏域携带选中的用户ID：

<!-- 右侧聊天区域 -->
<div class="chat-container">
    <?php if (isset($_SESSION['chat_with'])): ?>
        <?php
        // 获取当前聊天对象的信息（示例）
        $current_chat_user = mysqli_fetch_assoc(mysqli_query($conn, "SELECT username FROM users WHERE id = {$_SESSION['chat_with']}"));
        ?>
        <h3>正在聊天：<?php echo htmlspecialchars($current_chat_user['username']); ?></h3>
        
        <!-- 聊天记录展示区域 -->
        <div class="chat-history">
            <?php
            // 这里查询并循环展示聊天记录
            $messages = mysqli_query($conn, "SELECT * FROM messages WHERE (from_id = {$_SESSION['user_id']} AND to_id = {$_SESSION['chat_with']}) OR (from_id = {$_SESSION['chat_with']} AND to_id = {$_SESSION['user_id']}) ORDER BY created_at ASC");
            while ($msg = mysqli_fetch_assoc($messages)) {
                $sender = ($msg['from_id'] == $_SESSION['user_id']) ? '我' : $current_chat_user['username'];
                echo "<div class='message'><strong>{$sender}:</strong> {$msg['content']}</div>";
            }
            ?>
        </div>
        
        <!-- 消息发送表单 -->
        <form method="post" class="message-form">
            <input type="hidden" name="chat_with" value="<?php echo $_SESSION['chat_with']; ?>">
            <input type="text" name="message" placeholder="输入消息..." required>
            <button type="submit" name="send_message">发送</button>
        </form>
    <?php else: ?>
        <p>请选择一个聊天对象开始对话</p>
    <?php endif; ?>
</div>

可选优化：用AJAX避免页面刷新 #

如果不想整个页面刷新，可以用AJAX发送消息，只刷新聊天记录区域，这样状态自然保留：

// 给消息表单绑定提交事件
document.querySelector('.message-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    
    fetch('send_message.php', {
        method: 'POST',
        body: formData
    }).then(response => response.text())
      .then(() => {
          // 刷新聊天记录区域
          document.querySelector('.chat-history').innerHTML = '';
          // 重新加载聊天记录（这里可以写一个加载记录的函数）
          loadChatHistory();
          // 清空输入框
          this.querySelector('input[name="message"]').value = '';
      });
});

内容的提问来源于stack exchange，提问作者muad Pn