Ajax请求与PHP表单提交无法协同工作的问题排查

核心问题是表单提交与Ajax请求是两个独立的HTTP请求，导致PHP脚本无法同时获取$_POST['save']和$_POST['data']：单独触发时，表单提交只带表单字段（含save），Ajax请求只带图片数据（含data）；同时触发时两个请求分离，isset($_POST['save']) && isset($_POST['data'])的判断条件永远不成立。

你后续修改的代码逻辑存在错误：在按钮点击的downloadAll函数内重复绑定表单click事件，导致事件触发混乱，且未正确拦截表单默认提交流程。

1. 修正前端代码 #

阻止表单默认提交行为，通过单个Ajax请求同时发送表单字段与图片base64数据，使用FormData统一收集数据：

修改后的表单（Index.php）：

<form enctype="multipart/form-data" id="saveform" method="post" action="saveRecord.php">
  <?php include ('imagecropinterface/index.html');  ?>
  <div>
    <input autocomplete="off" type="text" maxlength="90" placeholder="HeadLine" id="headline" name="headline" style="width:386px;">
  </div>
  <div class="mt-2">
    <input autocomplete="off" type="text" maxlength="90" name="subtitle" placeholder="Sub Title" style="width:386px;">
  </div>
  <div>
    <input id='jour' type='text' value="" class=''>
  </div>
  <div>
    <textarea name="fullText" placeholder="Synopsis" style="width:386px;"></textarea>
  </div>
  <input class="btn btn-secondary" name="save" id="btnid" value="Save" type="submit">
</form>

修改后的JavaScript（index.html）：

// 监听表单提交事件，而非按钮点击事件
document.getElementById("saveform").addEventListener("submit", function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 创建FormData对象，自动收集所有表单字段
  const formData = new FormData(this);
  // 添加图片base64数据到FormData
  formData.append("data", imagesBase64);
  
  $.ajax({
    type: "POST",
    url: "/ap-beta2/saveRecord.php",
    data: formData,
    // 发送FormData必须设置这两个参数，避免jQuery错误处理数据格式
    contentType: false,
    processData: false,
    cache: false,
    error: function(err) {
      console.log("提交出错，请重试！", err);
    },
    success: function(data) {
      console.log(data);
    }
  });
});

2. 修正PHP代码 #

无需同时判断save和data，直接按需获取同一请求内的所有数据即可：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取图片base64数据
    if (isset($_POST['data'])) {
        echo "图片数据：" . $_POST['data'] . "<br>";
    }
    // 获取表单字段
    if (isset($_POST['headline'])) {
        echo "标题：" . $_POST['headline'] . "<br>";
    }
    if (isset($_POST['subtitle'])) {
        echo "副标题：" . $_POST['subtitle'] . "<br>";
    }
    // 其他字段可同理获取
}
?>

• FormData可自动收集所有表单字段，无需手动拼接，同时支持添加额外数据（如base64图片）
• 发送FormData时必须设置contentType: false和processData: false，否则jQuery会错误格式化请求数据
• 监听表单submit事件比按钮click更可靠，可覆盖回车键提交等场景

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