iOS端Safari/Firefox浏览器表单数据无法提交排查求助

问题背景 #

以下AJAX提交表单的代码在除iOS端Safari/Firefox之外的所有环境中均可正常运行：

jQuery("#gform_1").one('submit', function(event) {
  const form = document.getElementById("gform_1");
  const firstName = document.getElementById('input_1_1').value;
  const lastName = document.getElementById('input_1_2').value;
  const phoneNumber = document.getElementById('input_1_3').value;
  const email = document.getElementById('input_1_4').value;

  const formData = {
    firstName: firstName,
    lastName: lastName,
    phoneNumber: phoneNumber,
    email: email
  };

  jQuery.ajax({
    url: 'https://www.example.com/submissions.php',
    type: 'POST',
    data: formData,
    success: function(response) {
      console.log("Success!", response);
    },
    error: function(xhr, status, error) {
      console.error("Error!", error);
      console.log(xhr.responseText);
    }
  });
});

当前问题 #

提交失败时，console.error("Error!", error)输出Error! ''，console.log(xhr.responseText)同样为空。已排除CORS问题（表单与submissions.php同域）。

解决方法 #

1. 阻止表单默认提交行为 #

iOS端浏览器可能在AJAX请求完成前就触发原生表单提交并刷新页面，导致无法捕获错误信息。在事件处理函数开头添加阻止默认行为的代码：

jQuery("#gform_1").one('submit', function(event) {
  event.preventDefault(); // 新增：阻止表单默认提交
  // 后续代码保持不变
});

2. 调试服务器端响应 #

前端无法获取响应时，直接在submissions.php中添加日志记录，排查服务器端是否正常处理请求并返回响应：

// 记录请求参数到日志文件
file_put_contents('submission_log.txt', print_r($_POST, true) . "\n", FILE_APPEND);

// 强制输出调试响应，确保前端能捕获到内容
echo json_encode(['status' => 'debug', 'message' => '服务器已接收请求']);
exit;

3. 明确指定AJAX响应类型 #

iOS端浏览器可能对响应类型解析存在兼容性问题，手动指定dataType参数确保正确解析：

jQuery.ajax({
  url: 'https://www.example.com/submissions.php',
  type: 'POST',
  data: formData,
  dataType: 'json', // 根据服务器实际返回类型设置，如'text'或'html'
  success: function(response) {
    console.log("Success!", response);
  },
  error: function(xhr, status, error) {
    // 增强错误日志
    console.error("HTTP状态码:", xhr.status);
    console.error("状态描述:", xhr.statusText);
    console.error("响应内容:", xhr.responseText || '无内容');
  }
});

4. 改用FormData提交数据 #

直接从表单构建FormData对象，模拟原生表单提交格式，避免iOS端对数据格式的兼容性问题：

jQuery("#gform_1").one('submit', function(event) {
  event.preventDefault();
  const form = document.getElementById("gform_1");
  const formData = new FormData(form); // 直接从表单生成FormData

  jQuery.ajax({
    url: 'https://www.example.com/submissions.php',
    type: 'POST',
    data: formData,
    processData: false, // 禁止jQuery处理FormData
    contentType: false, // 让浏览器自动设置正确的Content-Type
    success: function(response) {
      console.log("Success!", response);
    },
    error: function(xhr, status, error) {
      console.error("错误状态:", status);
      console.error("HTTP状态码:", xhr.status);
      console.error("响应内容:", xhr.responseText || '无内容');
    }
  });
});

5. 增强错误日志输出 #

在error回调中打印更多XHR对象属性，帮助定位问题根源：

error: function(xhr, status, error) {
  console.error("错误状态标识:", status);
  console.error("HTTP状态码:", xhr.status);
  console.error("状态文本:", xhr.statusText);
  console.error("响应内容:", xhr.responseText || '无响应内容');
  console.error("错误对象:", error);
}

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