如何使用JQuery提交AJAX表单

介绍

jQuery 可以与表单提交配对来处理验证。这有利于向用户提供有关其输入中的任何错误的反馈。

在本教程中，您将看到一个与 PHP 后端通信的示例表单。表单将使用 jQuery 来处理没有页面刷新的表单（使用 AJAX），指示任何错误，并显示成功消息。

先决条件

要完成本教程，您需要：

本教程假设您在本地安装了 PHP，并且能够运行内置的 Web 服务器。您可以参考我们的教程之一，在您的环境中安装 PHP 。
熟悉 jQuery 库中的选择器和方法。
熟悉 Bootstrap 库中的类。
一个代码编辑器。
现代网络浏览器。

注意：本教程不指定最新版本的jQuery（目前为3.5.1）或Bootstrap（目前为5.0.0-beta1）。但是，本教程中的许多课程仍然适用于最新版本。

本教程已使用 PHP v7.3.24、jQuery v2.0.3 和 Bootstrap v3.0.3 进行了验证。

第 1 步 — 使用 PHP 构建后端

出于本教程的目的，后端将使用 PHP 编写。

首先，打开一个终端窗口并创建一个新的项目目录：

mkdir jquery-form-validation

导航到这个新的项目目录：

cd jquery-form-validation

然后，使用您的代码编辑器创建一个新的 process.php 文件：

进程.php

<?php

$errors = [];
$data = [];

if (empty($_POST['name'])) {
    $errors['name'] = 'Name is required.';
}

if (empty($_POST['email'])) {
    $errors['email'] = 'Email is required.';
}

if (empty($_POST['superheroAlias'])) {
    $errors['superheroAlias'] = 'Superhero alias is required.';
}

if (!empty($errors)) {
    $data['success'] = false;
    $data['errors'] = $errors;
} else {
    $data['success'] = true;
    $data['message'] = 'Success!';
}

echo json_encode($data);

该文件将采用 name、email 和 superheroAlias 的值。如果未提供这些值中的任何一个，则会发回一条错误消息。此时可以执行许多其他验证，但就本教程而言，您只需确保已提供这些必需的输入。否则，如果存在 name、email 和 superheroAlias 的值，则会发回成功消息。

注意： 在实际场景中，后端还负责其他任务，例如获取数据并将更改保存到数据库、创建会话或发送电子邮件。

现在您已经完成了表单处理，您可以创建表单。

第 2 步 — 使用 HTML 和 CSS 构建前端

出于本教程的目的，Bootstrap 将用于构建视图。

在您的项目目录中，使用您的代码编辑器创建一个 index.html 文件：

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Form Example</title>
    <link
      rel="stylesheet"
      href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
    />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
  <body>
    <div class="col-sm-6 col-sm-offset-3">
      <h1>Processing an AJAX Form</h1>

      <form action="process.php" method="POST">
        <div id="name-group" class="form-group">
          <label for="name">Name</label>
          <input
            type="text"
            class="form-control"
            id="name"
            name="name"
            placeholder="Full Name"
          />
        </div>

        <div id="email-group" class="form-group">
          <label for="email">Email</label>
          <input
            type="text"
            class="form-control"
            id="email"
            name="email"
            placeholder="email@example.com"
          />
        </div>

        <div id="superhero-group" class="form-group">
          <label for="superheroAlias">Superhero Alias</label>
          <input
            type="text"
            class="form-control"
            id="superheroAlias"
            name="superheroAlias"
            placeholder="Ant Man, Wonder Woman, Black Panther, Superman, Black Widow"
          />
        </div>

        <button type="submit" class="btn btn-success">
          Submit
        </button>
      </form>
    </div>
  </body>
</html>

将引用 Bootstrap 和 jQuery 的 CDN（内容分发网络）版本。表单的 action 将设置为之前创建的 PHP 文件。该表单将包含 name、email 和 superheroAlias 的字段。该表单还需要一个 Submit 按钮。

打开终端窗口并导航到项目目录。并运行 PHP 服务器：

php -S localhost:8000

在您的网络浏览器中访问 localhost:8000 并观察以下内容：

现在您已经完成了表单，您可以创建脚本来处理表单提交。

第 3 步 — 在 JavaScript 和 jQuery 中处理表单提交逻辑

要通过 AJAX 提交表单，您的脚本将需要处理四个任务：

捕获表单提交按钮，以便不执行默认操作。
使用 jQuery 从表单中获取所有数据。
使用 AJAX 提交表单数据。
如果有错误，请显示错误。

在您的项目目录中，使用您的代码编辑器创建一个新的 form.js 文件：

表单.js

$(document).ready(function () {
  $("form").submit(function (event) {
    var formData = {
      name: $("#name").val(),
      email: $("#email").val(),
      superheroAlias: $("#superheroAlias").val(),
    };

    $.ajax({
      type: "POST",
      url: "process.php",
      data: formData,
      dataType: "json",
      encode: true,
    }).done(function (data) {
      console.log(data);
    });

    event.preventDefault();
  });
});

此代码从 name、email 和 superheroAlias 字段中检索数据。然后，它使用表单数据的有效负载向 process.php 执行 AJAX 请求。成功连接后，控制台将记录响应数据。 event.preventDefault() 用于通过在提交时重新加载页面来防止表单默认行为。

保存对 form.js 的更改后，使用代码编辑器重新访问 index.html 文件。添加对新 JavaScript 文件的引用：

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Form Example</title>
    <!-- ... -->
    <script src="form.js"></script>
</head>
<!-- ... -->

现在，当用户按下表单上的 Submit 按钮时，JavaScript 代码将检索所有输入值并向 process.php 发送 POST 请求。

注意： 您将使用 .done 回调来处理成功的 AJAX 请求。这曾经被称为 .success，但后来在 jQuery 1.8+ 中已被弃用。

另一种选择是使用 serialize 而不是单独提取表单信息。

PHP 脚本将处理 AJAX 调用发送的输入并返回创建的 $data[] 数组。提交表单后，您可以在浏览器的控制台中观察到这一点：

现在您已经完成了表单逻辑，您可以创建脚本来处理表单错误。

第 4 步 - 显示表单验证错误

在 PHP 脚本中，代码检查以确保所有字段都是必需的。如果字段不存在，则会发回错误。

重新访问 form.js 并添加以下突出显示的代码行：

表单.js

// ...

    $.ajax({
      type: "POST",
      url: "process.php",
      data: formData,
      dataType: "json",
      encode: true,
    }).done(function (data) {
      console.log(data);

      if (!data.success) {
        if (data.errors.name) {
          $("#name-group").addClass("has-error");
          $("#name-group").append(
            '<div class="help-block">' + data.errors.name + "</div>"
          );
        }

        if (data.errors.email) {
          $("#email-group").addClass("has-error");
          $("#email-group").append(
            '<div class="help-block">' + data.errors.email + "</div>"
          );
        }

        if (data.errors.superheroAlias) {
          $("#superhero-group").addClass("has-error");
          $("#superhero-group").append(
            '<div class="help-block">' + data.errors.superheroAlias + "</div>"
          );
        }
      } else {
        $("form").html(
          '<div class="alert alert-success">' + data.message + "</div>"
        );
      }

    });

    event.preventDefault();
  });
// ...

此代码检查响应是否包含每个字段的错误。如果出现错误，它会添加一个 has-error 类并附加错误消息。

现在，在 Web 浏览器中重新访问您的表单并尝试使用表单提交数据。

如果服务器返回任何错误，表单将提供有关任何必填字段的反馈：

如果服务器没有返回错误，表单将提供成功提交的反馈：

每次我们提交表单时，我们之前提交的错误仍然存在。再次提交表单后，您需要通过删除它们来清除它们。

重新访问 form.js 并添加以下突出显示的代码行：

表单.js

// ...

  $("form").submit(function (event) {
    $(".form-group").removeClass("has-error");
    $(".help-block").remove();

    // ...
  });

// ...

此代码将从所有 .form-group 元素中删除 has-error 类。它还将删除所有带有错误消息的 .help-block 元素。

第 5 步 — 显示服务器连接错误

如果连接到服务器时出错，AJAX 调用将没有 JSON 响应。为了防止用户等待永远不会到达的响应，您可以提供连接失败的错误消息。

重新访问 form.js 并添加以下突出显示的代码行：

表单.js

// ...

    $.ajax({
      type: "POST",
      url: "process.php",
      data: formData,
      dataType: "json",
      encode: true,
    })
      .done(function(data) {
        // ...
      })
      .fail(function (data) {
        $("form").html(
          '<div class="alert alert-danger">Could not reach server, please try again later.</div>'
        );
      });

// ...

如果服务器因任何原因发生故障或停机，尝试提交表单的用户将收到错误消息：

现在您已经完成了服务器错误消息，您已经完成了示例表单。

使用 `$.post` 代替 `$.ajax`

jQuery 还提供 $.post 速记方法作为 $.ajax 的替代方法。

form.js 中的 $.ajax 代码可以用 $.post 重写：

$.post('process.php', function(formData) {
  // place success code here
})
  .fail(function(data) {
    // place error code here
  });

$.post 的优点是它不需要声明那么多的连接配置。

结论

在本文中，您构建了一个示例表单，该表单使用 jQuery 与 PHP 后端通信并显示表单中的任何错误。

作为下一步，您将需要探索更复杂的验证，例如有效的电子邮件地址和日期。您可能还对应用在浏览器中工作的客户端验证感兴趣。

如果您想了解有关 JavaScript 的更多信息，请查看我们的 JavaScript 主题页面以获取练习和编程项目。

如何使用JQuery提交AJAX表单

介绍

先决条件

第 1 步 — 使用 PHP 构建后端

第 2 步 — 使用 HTML 和 CSS 构建前端

第 3 步 — 在 JavaScript 和 jQuery 中处理表单提交逻辑

第 4 步 - 显示表单验证错误

第 5 步 — 显示服务器连接错误

使用 $.post 代替 $.ajax

结论

使用 `$.post` 代替 `$.ajax`