如何使用 JQuery 提交 AJAX 表单

5765a7e7440282ee9b11cd1a107f5d3a.png

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

翻译 | 杨小爱

介绍

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

8c1c7cf6d46532d51ec3c28f3399361b.png

在本教程中,我们将看到一个与 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 并观察以下内容:

ee1f38045422f5d31fc6110f766f6e84.png

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

第 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[] 数组。提交表单后,我们可以在浏览器的控制台中观察到这一点:

ad4771988b9fbd5189765818b0ac3ee0.png

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

第 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 浏览器中重新访问我们的表单并尝试使用表单提交数据。

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

ae47fa3e84f7eec8a8ded822dd4e9d68.png

如果服务器没有返回错误,表单将给一个成功提交的成功反馈:

9e47cd5b7d7ecba64cbd50a921ca0e5f.png

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

重新访问 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>'
        );
      });


// ...

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

385add86ecf4ec8268337e9d109396a7.png

现在,我们已经完成了服务器错误消息,已经完成了示例表单。

使用 $.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 相关内容进行学习与阅读。

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

学习更多技能

请点击下方公众号

6dbfb5310489f574977c676550fcc6c6.gif

9aab67470a2aa0b43bcccb0b38f3da03.png

146d00ee68a6c6e3a37b59354307f575.png

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值