jQuery解决input超多的表单提交

当一个表单包含大量输入框或其他控件时，提交数据将成为一个烦锁的问题。这时候，jQuery提供了一种非常简单的解决方法来解决这个问题。

1. 序言

在提交大量的表单数据时，有些情况下基于 HTML 的普通表单方式可能并不可行。或者，即使你使用这种方式，提交也可能会非常缓慢。要解决这个问题，你必须使用 AJAX 的形式来提交表单数据。

2. 不使用 AJAX 的方法

首先，我们可以很容易地使用传统的表单方式进行表单提交。例如：

<form action="submit-page.php" method="post">
  <input type="text" name="username" placeholder="Username" />
  <input type="text" name="email" placeholder="Email" />
  <!-- 更多表单项 -->
  <input type="submit" value="Submit" />
</form>

这个表单包含了多个输入框，以及一个提交按钮。当你点击提交按钮时，表单数据会被提交到submit-page.php页面中进行处理。

然而，这种方式的局限性在于，你无法在不刷新页面的情况下提交表单数据，因此如果含有多个输入框，提交会变得非常缓慢。

3. 使用 AJAX 方式提交表单数据

为了解决这个问题，我们可以使用 AJAX 方式提交表单数据，从而减轻了服务器的负担，并且在不刷新页面的情况下提交表单数据。例如：

<form id="myform">
  <input type="text" name="username" placeholder="Username" />
  <input type="text" name="email" placeholder="Email" />
  <!-- 更多表单项 -->
  <input type="button" id="submit_button" value="Submit" />
</form>

注意，我们将提交按钮的类型更改为button，这是因为我们将在编写 JavaScript 代码时使用单击事件来提交表单，而不是使用普通的提交方式。

接下来，我们需要编写一些 JavaScript 代码来提交表单数据。首先，我们需要使用 jQuery 库来依靠其简化 DOM 操作和 AJAX 请求。

在这个例子中，我们假设表单数据可以存储在一个 JavaScript 对象内，该对象的键值对 represents 表单控制的名称和值。这里是代码：

$(document).ready(function() {
  $('#submit_button').click(function() {
    var data = {
      username: $('input[name=username]').val(),
      email: $('input[name=email]').val(),
      // 更多表单项
    };

    $.post('submit-page.php', data, function(response) {
      alert(response);
    });
  });
});

代码分析：

• $(document).ready(...)：当文档加载完成后执行代码。
• $('#submit_button').click(...)：当提交按钮被单击时执行代码。
• var data = {...}：创建一个包含表单数据的 JavaScript 对象。
• $.post('submit-page.php', data, ...)：提交 AJAX 请求，并将表单数据作为参数传递给服务器。

这个例子简单易懂，但有一个明显的问题：如果表单包含大量的表单项，那么我们就需要编写大量的代码来获取和处理数据。这显然不是非常理想的方法。

4. 使用 jQuery 的序列化功能

为了解决这个问题，jQuery 提供了一个非常方便的序列化方法，该方法能够将表单数据转换为 JavaScript 对象或字符串。因此，针对上面的例子，我们可以使用 jQuery 序列化功能来简化代码实现。例如：

$(document).ready(function() {
  $('#submit_button').click(function() {
    var data = $('#myform').serialize();

    $.post('submit-page.php', data, function(response) {
      alert(response);
    });
  });
});

代码分析：

• $(document).ready(...)：当文档加载完成后执行代码。
• $('#submit_button').click(...)：当提交按钮被单击时执行代码。
• var data = $('#myform').serialize()：使用serialize()方法来序列化表单数据。该方法将表单数据转换为字符串。
• $.post('submit-page.php', data, ...)：提交 AJAX 请求，并将表单数据字符串作为参数传递给服务器。

使用 jQuery 序列化功能，我们可以轻松处理包含多个表单项的表单，并使代码更加优雅。