使用jQuery向HTML表格追加行及表单数据添加后瞬消问题求助

你遇到的这个问题太常见了——当你点击表单的提交按钮时，浏览器会默认触发页面刷新，把表单数据发送给PHP处理。而你用jQuery添加的行只是临时加到当前页面的DOM里，页面一刷新就回到初始状态了，所以看起来就是“一闪就没”。

解决思路分两步： #

1. 阻止表单的默认提交行为：用jQuery监听表单的submit事件，调用preventDefault()方法，让页面不刷新。
2. 用AJAX提交表单数据给PHP验证：这样既能完成PHP的验证逻辑，又能在验证通过后用jQuery添加行，全程页面不刷新。

具体代码示例： #

1. HTML表单部分（给表单加个id方便jQuery选择）

<form id="user-form" method="post" action="your-php-file.php">
  <input type="text" name="f_name" id="f_name" placeholder="名">
  <span class="error"><?php echo $f_nameERR; ?></span>
  
  <input type="text" name="l_name" id="l_name" placeholder="姓">
  <span class="error"><?php echo $l_nameERR; ?></span>
  
  <input type="email" name="email" id="email" placeholder="邮箱">
  <span class="error"><?php echo $emailERR; ?></span>
  
  <button type="submit">提交</button>
</form>

<table id="user-table">
  <!-- 表格结构和之前一致 -->
</table>

2. jQuery代码（处理表单提交和添加行）

$(document).ready(function() {
  $('#user-form').on('submit', function(e) {
    // 关键第一步：阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    
    // 获取表单里的输入值
    const formData = {
      f_name: $('#f_name').val(),
      l_name: $('#l_name').val(),
      email: $('#email').val()
    };
    
    // 第二步：用AJAX把数据发给PHP做验证
    $.ajax({
      url: $(this).attr('action'), // 就是表单的action属性指定的PHP文件
      type: 'POST',
      data: formData,
      dataType: 'json', // 让PHP返回JSON格式的结果，方便处理
      success: function(response) {
        // 如果PHP验证通过（假设response.success为true）
        if(response.success) {
          // 把验证通过的数据添加到表格
          const newRow = `
            <tr>
              <td>${response.data.f_name}</td>
              <td>${response.data.l_name}</td>
              <td>${response.data.email}</td>
            </tr>
          `;
          $('#user-table tbody').append(newRow);
          
          // 添加完成后清空表单
          $('#user-form')[0].reset();
        } else {
          // 如果验证失败，更新页面上的错误提示
          $('#f_name').next('.error').text(response.errors.f_name || '');
          $('#l_name').next('.error').text(response.errors.l_name || '');
          $('#email').next('.error').text(response.errors.email || '');
        }
      },
      error: function() {
        alert('服务器出错了，请稍后再试');
      }
    });
  });
});

3. PHP代码调整（返回JSON格式的验证结果）

你原来的验证逻辑可以保留，但最后要改成返回JSON：

<?php
$f_name = $l_name = $email = '';
$f_nameERR = $l_nameERR = $emailERR = '';
$response = ['success' => false, 'errors' => [], 'data' => []];

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  // 你的原有验证逻辑，比如：
  if(empty($_POST["f_name"])) {
    $f_nameERR = "名不能为空";
  } else {
    $f_name = trim($_POST["f_name"]);
  }
  
  if(empty($_POST["l_name"])) {
    $l_nameERR = "姓不能为空";
  } else {
    $l_name = trim($_POST["l_name"]);
  }
  
  if(empty($_POST["email"])) {
    $emailERR = "邮箱不能为空";
  } else {
    $email = trim($_POST["email"]);
    if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $emailERR = "请输入有效的邮箱地址";
    }
  }
  
  // 如果所有验证都通过
  if(empty($f_nameERR) && empty($l_nameERR) && empty($emailERR)) {
    $response['success'] = true;
    $response['data'] = [
      'f_name' => $f_name,
      'l_name' => $l_name,
      'email' => $email
    ];
    // 这里还可以加把数据存入数据库的操作
  } else {
    $response['errors'] = [
      'f_name' => $f_nameERR,
      'l_name' => $l_nameERR,
      'email' => $emailERR
    ];
  }
}

// 返回JSON格式的结果
header('Content-Type: application/json');
echo json_encode($response);
exit;
?>

为什么要这么做？ #

• 阻止默认提交后，页面不会刷新，jQuery添加的行就会一直保留在页面上。
• 用AJAX和PHP交互，既完成了服务器端的安全验证（比纯前端验证靠谱），又能实时给用户反馈，体验更好。

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