使用Fetch API实现异步表单提交与按钮状态控制

<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" onclick="enableButton2()"/>
<input id="saveFile" class="button_text" type="submit" name="download" value="Download" disabled/>

<script>
    function enableButton2() {
        document.getElementById("saveFile").disabled = false;
    }
</script>

<form action="#" id="myForm">
  <input id="saveForm" class="button_text" name="submit" type="button" value="Submit" onclick="submitFormAndEnableButton()" />
  <input id="saveFile" class="button_text" type="submit" name="download" value="Download" disabled />
</form>

<script>
    function submitFormAndEnableButton() {
        // 获取表单元素
        var formElement = document.getElementById('myForm');
        // 使用FormData对象收集表单数据
        var formData = new FormData(formElement);

        // 使用Fetch API发送POST请求
        fetch("your_php_script.php", { // 将 "your_php_script.php" 替换为实际处理表单的PHP文件路径
            method: "POST", // 指定请求方法为POST
            body: formData  // 将FormData作为请求体发送
        })
        .then(function(response) {
            // 检查HTTP响应状态码是否在200-299之间（表示成功）
            if (response.ok) {
                // 表单成功提交到服务器，可以在这里处理服务器返回的数据
                // 例如，如果PHP脚本返回JSON，可以使用 response.json()
                // response.text() 获取纯文本
                console.log("表单提交成功！");
                // 成功后启用第二个按钮
                document.getElementById('saveFile').disabled = false;
                // 可以在这里添加更多成功后的UI更新逻辑
            } else {
                // HTTP状态码表示请求未成功（例如404, 500等）
                console.error('网络响应错误，状态码: ' + response.status);
                // 可以在这里处理失败情况，例如显示错误信息
            }
        })
        .catch(function(error) {
            // 捕获网络请求过程中发生的错误（例如断网，URL错误等）
            console.error('Fetch请求失败:', error.message);
            // 可以在这里处理网络错误，例如提示用户检查网络连接
        });
    }
</script>

<?php
// your_php_script.php

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 假设你有一些数据要处理
    $submit_value = $_POST['submit'] ?? '';
    // ... 处理其他表单数据 ...

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

    // 根据处理结果返回响应
    if (/* 数据处理成功 */ true) {
        http_response_code(200); // 设置HTTP状态码为200 OK
        echo json_encode(["status" => "success", "message" => "数据已成功保存"]);
    } else {
        http_response_code(500); // 设置HTTP状态码为500 Internal Server Error
        echo json_encode(["status" => "error", "message" => "数据保存失败"]);
    }
} else {
    http_response_code(405); // Method Not Allowed
    echo json_encode(["status" => "error", "message" => "只允许POST请求"]);
}
?>