如何使用 JQuery 提交 AJAX 表单

最新推荐文章于 2024-07-04 16:04:39 发布

web前端开发V

最新推荐文章于 2024-07-04 16:04:39 发布

阅读量978

点赞数

文章标签： python java js vue javascript

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649123567&idx=1&sn=311191c934121c8606a32aedb23ace9e&chksm=be584d42892fc4540d060bb9d2dab2dd0a5cdd3bd8a6ae3778b4b047c76c62ac2ebe529866cc&scene=126&&sessionid=0

版权

英文 | https://www.digitalocean.com/community/tutorials/submitting-ajax-forms-with-jquery

翻译 | 杨小爱

介绍

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

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

准备工作

要完成本内容，我们需要做如下准备：

在本地电脑上安装PHP，并且能够运行内置的 Web 服务器。
熟悉 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

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

cdjquery-form-validation

然后，使用代码编辑器创建一个新的 process.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 文件如下：

<!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 文件。该表单将包含姓名、电子邮件和 superheroAlias 字段。该表单还需要一个提交按钮。

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

php -S localhost:8000

在 Web 浏览器中访问 localhost:8000 并观察以下内容：

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

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

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

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

在我们的项目目录中，使用我们的代码编辑器创建一个新的 form.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 文件的引用：

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

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

注意：我们将使用 .done 回调来处理成功的 AJAX 请求。这曾经被称为 .success，但后来在 jQuery 1.8+ 中已被弃用。另一种选择是使用serialize而不是单独提取表单信息。

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

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

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

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

重新访问 form.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 ，并添加以下显示的代码行：

// ...


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


    // ...
  });


// ...

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

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

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

重新访问 form.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 相关内容进行学习与阅读。

今天内容就到这里，感谢您的阅读。

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如何使用 JQuery 提交 AJAX 表单

英文 | https://www.digitalocean.com/community/tutorials/submitting-ajax-forms-with-jquery翻译 | 杨小...
复制链接

扫一扫