jQuery/AJAX表单提交无报错但数据无法写入数据库问题求助

问题表现 #

• 自研CSS饼图组件，点击任意扇区可唤起简易提交表单
• 点击表单提交按钮后，无数据写入数据库，页面仅弹出提交成功提示，浏览器控制台无报错输出
• 演示页点击Button1即可唤起目标提交表单

核心问题定位 #

1. 前端表单数据未正确采集：更新后的jQuery代码中，formData变量未在提交事件作用域内初始化，也未绑定当前触发提交的表单元素，实际发送的AJAX请求为空载荷，既没有携带用户输入的name字段，也没有携带提交按钮的saveAnswers字段，PHP端检测不到对应参数，根本不会执行数据库插入逻辑。
2. 前端响应解析逻辑失效：AJAX请求未配置dataType: 'json'，PHP返回的JSON字符串会被识别为普通文本，直接访问data.result会得到undefined，所有成功/失败的判断分支都不会触发，页面默认显示的成功提示属于前置写死的状态，和实际请求结果无关。
3. 后端逻辑缺失鲁棒性：更新后的PHP代码未设置JSON响应头，没有非提交场景的兜底响应，也没有开启PDO错误上报，SQL执行失败时无任何错误输出；同时代码片段缺失数据库连接初始化逻辑，若连接代码位置错误会直接导致插入操作失败。
4. 交互逻辑顺序错乱：加载提示没有在发起请求前触发，请求异常时回调函数为空，用户看不到真实的请求状态，出问题无法感知。

完整修复代码 #

前端jQuery逻辑修复 #

将FormData初始化逻辑移入提交事件回调，绑定当前表单，补全响应解析、状态切换、错误提示逻辑：

$(document).ready(function() {
  $('form').on('submit', function(e) {
    e.preventDefault();
    // 采集当前表单的所有字段数据，自动包含submit按钮的name/value
    const formData = new FormData(this);
    // 重置提示状态，显示加载中
    $("#loadingmessage").show();
    $("#sucessmsg, #errormsg").hide();

    $.ajax({
      url: "submit.php",
      type: "POST",
      data: formData,
      contentType: false,
      cache: false,
      processData: false,
      dataType: 'json', // 强制按JSON格式解析后端响应
      success: function(data) {
        $("#loadingmessage").hide();
        if(data.result === 'success') {
          $("#sucessmsg").show();
          this.reset(); // 提交成功后清空表单
        } else {
          $("#errormsg").show();
          console.error('提交失败：', data.msg || '服务端异常');
        }
      },
      error: function(xhr, status, err) {
        $("#loadingmessage").hide();
        $("#errormsg").show();
        console.error('请求异常：', err);
      }				
    });
  }); 
});

后端PHP逻辑修复 #

补全数据库连接配置，开启PDO错误模式，增加参数校验和兜底响应，移除测试用的sleep代码：

// 设置响应格式为JSON
header('Content-Type: application/json');
// 初始化数据库连接，设置UTF8编码、开启异常报错
$connect = new PDO(
  "mysql:host=localhost;dbname=MYDBNAME;charset=utf8mb4",
  "DBUSERNAME",
  "DBPASSWORD",
  [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
);

// 默认返回错误响应
$response = [
  'result' => 'error',
  'msg' => '非法请求'
];

// 检测到合法提交请求时执行插入
if(isset($_POST["saveAnswers"])) {
  try {
    // 校验必填参数
    $name = trim($_POST["name"] ?? '');
    if(empty($name)) {
      $response['msg'] = '姓名不能为空';
      echo json_encode($response);
      exit;
    }

    // 执行参数化插入
    $stmt = $connect->prepare("INSERT INTO clarity (name) VALUES (:name)");
    $stmt->execute([':name' => $name]);

    $response = [
      'result' => 'success',
      'msg' => '提交成功'
    ];
  } catch (PDOException $e) {
    $response['msg'] = '数据库错误：' . $e->getMessage();
  }
}

echo json_encode($response);

页面元素补全 #

确保页面内存在对应状态提示元素，现有表单结构无需调整：

<!-- 状态提示元素 -->
<div id="loadingmessage" style="display: none;">提交中，请稍候...</div>
<div id="sucessmsg" style="display: none; color: #2ecc71;">提交成功</div>
<div id="errormsg" style="display: none; color: #e74c3c;">提交失败，请重试</div>

<!-- 原有表单 -->
<form class="form-wrapper" action="" method="post" id="submitForm1">
  <fieldset class="section is-active">
    <h3>What is your name?</h3>
    <input type="text" name="name" id="name" placeholder="Your Name">
    <button type="submit" class="button" name="saveAnswers" id="saveAnswers">Submit</button>
  </fieldset>
</form>

验证方法 #

1. 修复后打开浏览器开发者工具，切换到「网络」面板，提交表单
2. 检查submit.php请求的载荷，确认携带name、saveAnswers两个参数
3. 检查请求响应内容，确认是标准JSON格式，result字段值符合执行结果
4. 查看数据库clarity表，确认用户输入的姓名正常写入

内容的提问来源于stack exchange，提问作者S.I.