FetchAPI优化表单提交，防止按钮重复点击

本篇文章向大家介绍《Fetch API优化表单提交，防止按钮状态重置》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

当传统表单提交导致页面完全重载时，通过JavaScript动态启用的按钮会恢复到其初始的禁用状态。本教程将详细介绍如何利用现代Web API——Fetch API实现异步表单提交（AJAX），从而避免页面重载，确保按钮状态的持久性，并提供更流畅的用户交互体验。

理解问题根源：页面重载与状态丢失

在Web开发中，当一个表单通过type="submit"的按钮提交时，浏览器会默认执行一次完整的页面重载。这意味着，即使您通过JavaScript成功地改变了页面上某个元素的属性（例如，将一个禁用按钮设置为启用），一旦服务器处理完请求并返回响应，整个DOM（文档对象模型）树会被重新构建，所有之前通过JavaScript进行的动态修改都会丢失，元素将恢复到其HTML初始定义的状态。这就是为什么一个通过JavaScript启用的按钮在表单提交后会再次变为禁用的原因。

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

为了解决页面重载导致的状态丢失问题，我们需要采用异步提交（AJAX）的方式来处理表单数据。Fetch API是现代浏览器提供的一种强大、灵活的API，用于替代传统的XMLHttpRequest，以更简洁的方式进行网络请求。通过Fetch API，我们可以在不重载整个页面的情况下向服务器发送数据，并在接收到响应后动态更新页面内容。

核心思路：

1. 将触发提交的按钮类型从submit改为button，以阻止其默认的表单提交行为。
2. 在按钮的点击事件中，使用Fetch API手动收集表单数据并发送到服务器。
3. 在Fetch请求成功后，根据服务器的响应来启用第二个按钮。

实现步骤与示例代码

1. 修改HTML结构

首先，我们需要调整表单中第一个按钮的type属性，将其从submit改为button。这样，点击该按钮时就不会触发默认的表单提交和页面重载。同时，确保您的表单有一个唯一的id，以便JavaScript可以轻松获取它。

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

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

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

在上述代码中：

• id="myForm" 用于在JavaScript中引用表单。
• id="submitFormBtn" 的 type="button" 阻止了默认的表单提交行为。
• onclick="handleFormSubmission()" 将调用我们自定义的JavaScript函数来处理提交逻辑。
• id="downloadFileBtn" 初始状态为 disabled。

2. 编写JavaScript逻辑

接下来，我们将编写handleFormSubmission()函数，利用Fetch API来发送表单数据。

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('网络错误，请检查您的网络连接！');
  });
}

在上述JavaScript代码中：

• new FormData(formElement) 能够方便地从
  元素中获取所有带有name属性的输入字段的值。
• fetch(serverUrl, { method: 'POST', body: formData }) 发送POST请求，body属性直接接收FormData对象，Fetch API会自动设置正确的Content-Type（通常是multipart/form-data）。
• .then(response => { ... }) 处理服务器响应。response.ok是一个布尔值，指示响应是否成功（HTTP状态码在200-299之间）。
• .catch(error => { ... }) 捕获任何网络错误，例如服务器不可达。
• 在response.ok为true的分支中，我们安全地启用了downloadFileBtn，因为此时页面不会重载，按钮状态将保持。

后端PHP脚本示例（your-php-script.php）

后端PHP脚本会像往常一样接收POST请求的数据。由于是异步请求，PHP脚本通常不需要重定向或渲染完整的HTML页面，而是返回一个状态码或JSON数据作为响应。

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

这个PHP脚本会接收POST数据，执行相应的业务逻辑，并返回一个JSON响应。http_response_code()函数用于设置HTTP状态码，这对于前端Fetch API的response.ok判断至关重要。

注意事项

1. URL正确性： 确保fetch函数中的serverUrl指向正确的后端处理脚本路径。
2. 错误处理： 务必实现fetch的.then()和.catch()块，以便妥善处理服务器响应和网络错误，并向用户提供有意义的反馈。
3. 用户体验： 在异步请求进行时，可以考虑添加加载指示器（如“正在提交...”的文本或旋转图标），以提高用户体验。在请求成功或失败后，移除这些指示器并显示相应的消息。
4. 安全性： 异步提交同样需要考虑安全问题，如CSRF（跨站请求伪造）保护。如果您的表单使用了CSRF令牌，需要确保在Fetch请求中包含该令牌，并在后端进行验证。
5. 后端响应： 后端脚本应返回清晰的响应（例如JSON），指示操作是否成功，以及任何相关的数据或错误信息。前端可以解析这些响应来更新UI。
6. 按钮状态管理： 在复杂的应用中，可能需要更精细的按钮状态管理，例如在请求发送时禁用提交按钮，防止重复提交。

总结

通过将传统的同步表单提交转换为异步的Fetch API请求，我们能够有效地解决JavaScript动态启用按钮在页面重载后状态丢失的问题。这种方法不仅保持了UI状态的持久性，还显著提升了用户体验，因为它避免了不必要的页面闪烁和等待，使得Web应用更加流畅和响应迅速。掌握Fetch API是现代Web开发中实现高效、动态用户界面的关键技能之一。

今天关于《FetchAPI优化表单提交，防止按钮重复点击》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！