Fetch提交表单与按钮控制方法

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《使用Fetch提交表单与按钮控制技巧》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

本文旨在解决JavaScript启用按钮在传统PHP表单提交后失效的问题。当表单通过同步方式提交时，页面会完全重载，导致DOM状态重置，从而使JavaScript动态修改的按钮状态恢复到初始值。解决方案是利用Fetch API进行异步表单提交，避免页面刷新，从而有效保留按钮的启用状态，同时提升用户体验并实现更灵活的交互逻辑。

问题背景：同步表单提交与DOM状态重置

在Web开发中，我们常会遇到这样的场景：一个表单包含多个按钮，其中某个按钮（例如“下载”按钮）需要依赖于前一个操作（例如“提交”按钮点击并完成数据处理）才能启用。通常，我们会使用JavaScript来动态启用或禁用HTML元素。

考虑以下经典示例：

<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>

这段代码的意图是，当用户点击“Submit”按钮时，enableButton2()函数会被调用，从而启用“Download”按钮。然而，如果“Submit”按钮的type属性是submit，它会触发一个传统的表单提交行为。这个行为会导致整个页面重新加载（即所谓的“硬刷新”）。页面重载后，浏览器会重新解析HTML并构建DOM，此时saveFile按钮会回到其初始的disabled状态，使得JavaScript所做的更改失效。

这是因为传统的表单提交是一个同步过程，它会将浏览器导航到新的URL（通常是表单的action属性指定的URL），或者重新加载当前页面。页面一旦重新加载，所有客户端的JavaScript状态和DOM修改都会丢失。

解决方案：使用Fetch API进行异步表单提交

为了解决页面重载导致状态丢失的问题，我们需要避免传统的同步表单提交。最佳实践是使用JavaScript的异步通信技术，例如Fetch API，将表单数据发送到服务器，而无需刷新整个页面。

Fetch API提供了一种现代、灵活的方式来发起网络请求。通过Fetch API，我们可以在后台向服务器发送数据，并在收到响应后，仅更新页面中需要改变的部分，从而保持其他元素的现有状态。

核心思路

1. 修改触发按钮类型： 将作为触发器的按钮（例如“Submit”按钮）的type从submit改为button，以防止其默认的表单提交行为。
2. 使用FormData收集数据： 在JavaScript中，使用FormData对象来轻松收集表单中的所有数据。
3. 使用Fetch API发送请求： 构建一个fetch请求，指定HTTP方法（通常是POST）和请求体（FormData对象）。
4. 处理服务器响应： 在fetch的then方法中处理服务器的响应。根据响应结果，决定是否启用第二个按钮。
5. 错误处理： 捕获网络错误或服务器返回的非预期响应。

代码实现

首先，修改HTML结构，将第一个按钮的type改为button，并确保表单有一个id以便JavaScript获取：

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

接下来，实现submitFormAndEnableButton() JavaScript函数，使用Fetch API发送数据：

<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脚本注意事项

服务器端的PHP脚本（your_php_script.php）应该处理接收到的数据，并返回一个HTTP状态码，通常是200 OK表示成功。PHP脚本不应执行页面重定向或输出完整的HTML页面，而是应该输出一个简单的状态（如JSON对象，或纯文本的“success”/“error”）。

例如，一个简单的PHP处理脚本可能如下：

<?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请求"]);
}
?>

总结

通过将传统的同步表单提交替换为Fetch API实现的异步提交，我们成功避免了页面重载，从而解决了JavaScript动态修改的DOM状态（如按钮的disabled属性）在PHP处理后被重置的问题。这种方法不仅保持了前端状态的持久性，还提供了更流畅的用户体验，因为用户无需等待整个页面刷新。此外，Fetch API的Promise链式调用使得异步请求的成功和失败处理更加清晰和现代化，是构建响应式Web应用的重要工具。

到这里，我们也就讲完了《Fetch提交表单与按钮控制方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！