无需jQuery preventDefault，如何阻止表单提交刷新页面？

这个问题很常见——默认表单提交的同步请求会强制刷新页面，但直接阻止默认行为又断了数据提交的通路。核心解决思路是用AJAX异步提交表单数据，既保留PHP处理逻辑，又让页面保持不动。下面是具体实现步骤：

1. 调整HTML表单（仅需加个ID方便选择） #

不需要大改原有表单结构，给表单加个唯一ID即可：

<form id="xmlSaveForm" method="POST" action="your-save-script.php">
  <input type="text" name="nickname" placeholder="昵称" required>
  <input type="tel" name="phone" placeholder="手机号" required>
  <button type="submit">保存到XML</button>
</form>
<!-- 可选：加个反馈区域，告诉用户操作结果 -->
<div id="submitFeedback"></div>

2. 编写jQuery异步提交代码 #

通过阻止默认提交行为，手动用AJAX把表单数据发给PHP脚本：

$(document).ready(function() {
  $('#xmlSaveForm').submit(function(e) {
    // 第一步：阻止浏览器默认的刷新提交行为
    e.preventDefault();
    
    // 第二步：收集表单所有数据（自动转成URL编码格式，不用手动拼参数）
    var formData = $(this).serialize();
    
    // 第三步：异步发送数据到PHP处理脚本
    $.ajax({
      url: $(this).attr('action'), // 复用表单的action属性作为请求地址
      type: $(this).attr('method'), // 复用表单的method（POST/GET）
      data: formData,
      success: function(response) {
        // 数据保存成功后的反馈
        $('#submitFeedback').html('<p style="color:#2ecc71;">✅ 数据保存成功！</p>');
        // 可选：清空表单
        $('#xmlSaveForm')[0].reset();
      },
      error: function(xhr, status, err) {
        // 保存失败的反馈
        $('#submitFeedback').html('<p style="color:#e74c3c;">❌ 保存失败：' + err + '</p>');
      }
    });
  });
});

3. 确保PHP脚本正常工作 #

你的原有PHP保存XML逻辑完全可以复用，只需要稍微调整响应逻辑，方便AJAX判断结果：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 接收表单数据（记得转义，避免XML注入）
  $nickname = htmlspecialchars($_POST['nickname']);
  $phone = htmlspecialchars($_POST['phone']);

  // 加载或创建XML文件
  $xmlPath = 'user-data.xml';
  if (file_exists($xmlPath)) {
    $xml = simplexml_load_file($xmlPath);
  } else {
    $xml = new SimpleXMLElement('<userList></userList>');
  }

  // 添加新数据节点
  $user = $xml->addChild('user');
  $user->addChild('nickname', $nickname);
  $user->addChild('phone', $phone);

  // 保存XML并返回响应
  if ($xml->asXML($xmlPath)) {
    echo 'success'; // 给AJAX返回成功标记
  } else {
    http_response_code(500); // 返回错误状态码
    echo '无法写入XML文件，请检查文件权限';
  }
} else {
  http_response_code(405);
  echo '仅支持POST请求';
}
?>

关键注意点 #

• e.preventDefault()只是阻止了浏览器的跳转刷新，但我们通过AJAX手动把数据发出去了，所以PHP依然能正常接收并处理数据。
• 用serialize()可以快速收集所有表单字段，不用逐个获取输入值，减少代码量。
• 一定要给XML文件设置正确的写入权限（比如Linux下设置chmod 664），否则PHP无法保存数据。
• 记得用htmlspecialchars()转义用户输入，避免XML注入漏洞。

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