如何通过Ajax提交HTML表单、保存数据到文件并在Div中显示

问题背景 #

我是Web开发新手，正在学习JavaScript（jQuery），选了简易聊天项目作为入门实践。目前遇到两个问题：

• 发送消息后页面会自动刷新
• 希望通过Ajax将新消息保存到messages.txt文件，并在id为#result的div中显示新增消息

以下是我当前的代码：

原始HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
    <title>Chat</title>
</head>
<body>
   <h1>Chat room</h1>
   <div id="status"></div>
    
    <form id="send" class="ajax" action="action.php" method="POST">
         <label for="fname">Type your message</label>
         <input type="text" id="fname" name="myMessage">
         <input id="upload" type="submit" name="myButton"value="Submit" />
    </form>
    <div id="result"></div>
    <script>
    $(document).ready(function () {
  $("form").submit(function (event) {
    var formData = {
      name: $("#fname").val(),
      
    };
    var posting = $.post(url, {
  name: $('#fname').val(),
});
/* So far, just listing whether the Form has managed to prevent its classic sending */
posting.done(function(data) {
  $('#result').text('success');
});

    $.ajax({
      type: "POST",
      url: "process.php",
      data: formData,
      dataType: "json",
      encode: true,
    }).done(function (data) {
      console.log(data);
    });

    event.preventDefault();
  });
});
    </script>
</body>
</html>

原始PHP代码（process.php）

<?php
 $path = 'messages.txt';
 if (isset($_POST['myButton']) ) {
    $fh = fopen($path,"a");
    $string = $_POST['myMessage' ];
    fwrite($fh,$string . PHP_EOL); 
    fclose($fh); 
 }
?>

问题分析 #

1. 页面刷新问题：event.preventDefault()放在代码末尾，若前面的Ajax请求代码报错（比如url变量未定义），会导致阻止默认提交的代码无法执行，页面依然刷新。
2. 参数不匹配：JS中formData的键是name，但PHP接收的是myMessage，导致消息无法正确传递；同时PHP判断$_POST['myButton']是否存在，但Ajax提交时未携带该参数，写入逻辑不会触发。
3. 冗余请求：同时使用了$.post和$.ajax两个请求，造成资源浪费且逻辑混乱。
4. 消息显示缺失：成功回调仅显示"success"，未将新增消息展示到#result中。

修正后的代码 #

修正后的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
    <title>Chat</title>
</head>
<body>
   <h1>Chat room</h1>
   <div id="status"></div>
    
    <form id="send" class="ajax" action="action.php" method="POST">
         <label for="fname">Type your message</label>
         <input type="text" id="fname" name="myMessage">
         <input id="upload" type="submit" name="myButton" value="Submit" />
    </form>
    <div id="result"></div>
    <script>
    $(document).ready(function () {
      $("form").submit(function (event) {
        // 先阻止表单默认提交行为，避免页面刷新
        event.preventDefault();
        
        var message = $("#fname").val();
        // 清空输入框
        $("#fname").val('');
        
        $.ajax({
          type: "POST",
          url: "process.php",
          data: {
            myMessage: message
          },
          dataType: "json",
          encode: true,
        }).done(function (response) {
          if (response.success) {
            // 将新增消息追加到result容器
            $('#result').append('<p>' + response.message + '</p>');
          } else {
            $('#status').text('消息发送失败');
          }
        }).fail(function() {
          $('#status').text('请求出错');
        });
      });
    });
    </script>
</body>
</html>

修正后的PHP代码（process.php）

<?php
$path = 'messages.txt';
// 直接判断消息是否存在，无需依赖提交按钮参数
if (isset($_POST['myMessage']) && !empty(trim($_POST['myMessage']))) {
    $message = trim($_POST['myMessage']);
    // 写入文件，追加换行
    file_put_contents($path, $message . PHP_EOL, FILE_APPEND);
    // 返回JSON格式的成功响应
    echo json_encode([
        'success' => true,
        'message' => $message
    ]);
} else {
    echo json_encode([
        'success' => false,
        'message' => '消息不能为空'
    ]);
}
?>

关键修改说明 #

1. 阻止页面刷新：将event.preventDefault()移到submit事件的最开头，确保无论后续代码是否出错，都能阻止表单默认提交。
2. 参数对齐：JS中传递的参数键改为myMessage，与PHP接收的字段一致；PHP去掉对myButton的判断，改为判断消息内容是否有效。
3. 简化请求：移除冗余的$.post请求，只保留一个$.ajax请求，逻辑更清晰。
4. 消息显示：在Ajax成功回调中，将返回的消息追加到#result容器，实现即时显示；同时处理失败情况，给用户反馈。
5. 输入优化：发送后清空输入框，提升用户体验；PHP使用file_put_contents简化文件写入操作，代码更简洁。

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