利用Fetch API优化表单提交：防止JavaScript启用按钮状态重置

<form action="#" id="myForm">
  <!-- 提交按钮，类型改为 "button" -->
  <input id="submitFormBtn" class="button_text" name="submit" type="button" value="提交表单" onclick="handleFormSubmission()" />

  <!-- 待启用按钮，初始为禁用状态 -->
  <input id="downloadFileBtn" class="button_text" type="submit" name="download" value="下载文件" disabled />

  <!-- 其他表单元素，如文本域等 -->
  <textarea name="content" rows="5" cols="30"></textarea>
</form>

function handleFormSubmission() {
  // 1. 获取表单元素
  const formElement = document.getElementById('myForm');
  // 2. 使用FormData对象收集表单数据
  // FormData会自动将表单中的所有name-value对封装起来，方便发送
  const formData = new FormData(formElement);

  // 3. 定义服务器处理脚本的URL
  // 请将 'your-php-script.php' 替换为实际的后端处理文件路径
  const serverUrl = 'your-php-script.php'; 

  // 4. 使用Fetch API发送POST请求
  fetch(serverUrl, {
    method: 'POST', // 指定请求方法为POST
    body: formData   // 将FormData对象作为请求体发送
  })
  .then(response => {
    // 5. 检查HTTP响应状态码
    // response.ok 为 true 表示HTTP状态码在200-299范围内
    if (response.ok) {
      // 请求成功，后端PHP脚本已执行
      console.log('表单提交成功！');
      // 在这里可以处理服务器返回的数据，例如：
      // return response.json(); // 如果后端返回JSON数据

      // 启用第二个按钮
      document.getElementById('downloadFileBtn').disabled = false;
    } else {
      // HTTP状态码不在200-299范围内，表示服务器端或网络问题
      console.error('表单提交失败，HTTP状态码:', response.status);
      // 根据需要显示错误信息给用户
      alert('提交失败，请稍后再试！');
    }
  })
  .catch(error => {
    // 6. 捕获网络错误（例如，网络断开、URL错误等）
    console.error('网络请求错误:', error.message);
    alert('网络错误，请检查您的网络连接！');
  });
}

<?php
header('Content-Type: application/json'); // 建议返回JSON格式数据

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 假设表单字段名为 'content'
    $content = isset($_POST['content']) ? $_POST['content'] : '';

    // 在这里执行您的PHP逻辑，例如：
    // - 数据库操作
    // - 文件处理
    // - 业务逻辑计算

    // 示例：简单地打印接收到的内容
    error_log("Received content: " . $content); 

    // 模拟一些处理时间
    sleep(1); 

    // 根据处理结果返回响应
    if (!empty($content)) {
        echo json_encode(['status' => 'success', 'message' => '数据已成功处理']);
        http_response_code(200); // 显式设置HTTP状态码为200
    } else {
        echo json_encode(['status' => 'error', 'message' => '内容为空，处理失败']);
        http_response_code(400); // 设置HTTP状态码为400 Bad Request
    }
} else {
    // 非POST请求的处理
    echo json_encode(['status' => 'error', 'message' => '无效的请求方法']);
    http_response_code(405); // Method Not Allowed
}
?>