jquery表单提交带错误信息提示效果

下面是关于 jquery 表单提交带错误信息提示的完整攻略：

1. 前期准备

在开始编写代码前，需要确保以下条件已经满足：

已经引入了 jQuery 库；
已经编写好了需要提交的表单；
已经准备好了后端接口，并能够在表单提交时正确响应。

2. 编写前端代码

2.1 绑定表单提交事件

在 jQuery 中，我们可以使用 $(selector).submit() 方法来绑定表单提交事件。如下所示：

$(document).ready(function() {
  $('form').submit(function(event) {
    // 在这里编写对表单提交的处理逻辑
  });
});

2.2 阻止表单默认提交事件

在表单提交时，浏览器会默认发送 POST 请求，这通常会导致页面的重载。在这里，我们希望使用 AJAX 技术提交表单，并且不重载页面。因此，需要阻止表单默认提交事件的发生。如下所示：

$(document).ready(function() {
  $('form').submit(function(event) {
    event.preventDefault();  // 阻止表单默认提交事件的发生
    // 在这里编写对表单提交的处理逻辑
  });
});

2.3 获取表单数据

在表单提交时，需要将表单中填写的数据提交到后端。因此，我们需要先获取表单中填写的数据。常用的方法有 $(selector).val()（用于获取文本框、密码框等单个表单项的值）、$(selector).serialize()（用于将所有表单项的值组合成一个 URL 编码的字符串）等。下面是一个使用 serialize() 方法获取表单数据的例子：

$(document).ready(function() {
  $('form').submit(function(event) {
    event.preventDefault();  // 阻止表单默认提交事件的发生

    var formData = $(this).serialize();  // 获取表单数据
    // 在这里编写对表单提交的处理逻辑
  });
});

2.4 发送 AJAX 请求

获取到表单数据后，我们需要将数据发送给后端进行处理。通常情况下，我们会使用 jQuery 的 $.ajax() 方法来发送 AJAX 请求。这个方法非常灵活，可以自定义请求的类型、URL、数据等参数。下面是一个使用 $.ajax() 发送表单数据的例子：

$(document).ready(function() {
  $('form').submit(function(event) {
    event.preventDefault();  // 阻止表单默认提交事件的发生

    var formData = $(this).serialize();  // 获取表单数据

    $.ajax({
      type: 'POST',
      url: 'your-backend-api-url',
      data: formData,
      success: function(response) {
        console.log(response);  // 在控制台打印后端返回的响应
        // 在这里编写对 AJAX 请求成功的处理逻辑
      },
      error: function(xhr, status, error) {
        console.log(error);  // 在控制台打印出错信息
        // 在这里编写对 AJAX 请求失败的处理逻辑
      }
    });
  });
});

2.5 显示错误提示信息

如果后端在处理表单数据时发生了错误，我们需要将错误提示信息显示给用户。一种常见的方式是，在提交表单的模态框中添加一个 alert 控件，用于显示错误提示信息。下面是一个示例代码：

<!-- 带有错误提示信息的提交模态框 -->
<div class="modal" id="submitModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">提交表单</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form>
        <div class="modal-body">
          <!-- 表单项输入区域 -->
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- jQuery 代码 -->
$(document).ready(function() {
  $('form').submit(function(event) {
    event.preventDefault();  // 阻止表单默认提交事件的发生

    var formData = $(this).serialize();  // 获取表单数据

    $.ajax({
      type: 'POST',
      url: 'your-backend-api-url',
      data: formData,
      success: function(response) {
        console.log(response);  // 在控制台打印后端返回的响应
        // 在这里编写对 AJAX 请求成功的处理逻辑
      },
      error: function(xhr, status, error) {
        console.log(error);  // 在控制台打印出错信息

        // 显示错误提示信息
        var errorText = xhr.responseText;
        $('#submitModal .modal-body').prepend(
          `<div class="alert alert-danger">${errorText}</div>`
        );
      }
    });
  });
});

3. 示例演示

这里给出两个示例演示。

3.1 示例 1：表单提交带错误提示

下面是一个简单的表单提交示例，使用 AJAX 技术提交表单，并在发生错误时显示错误提示信息。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery 表单提交带错误提示</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <form>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" name="username" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" name="password" required>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary">提交</button>
      </div>
    </form>
  </div>

  <div class="modal" id="submitModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">提交表单</h5>
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form>
          <div class="modal-body">
            <!-- 表单项输入区域 -->
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">提交</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('form').submit(function(event) {
        event.preventDefault();  // 阻止表单默认提交事件的发生

        var formData = $(this).serialize();  // 获取表单数据

        $.ajax({
          type: 'POST',
          url: 'http://localhost:8000/api/login/',
          data: formData,
          success: function(response) {
            console.log(response);  // 在控制台打印后端返回的响应
            $('#submitModal').modal('hide');  // 关闭模态框
            alert('登录成功！');  // 弹出登录成功提示框
          },
          error: function(xhr, status, error) {
            console.log(error);  // 在控制台打印出错信息

            // 显示错误提示信息
            var errorText = xhr.responseText;
            $('#submitModal .modal-body').prepend(
              `<div class="alert alert-danger">${errorText}</div>`
            );
          }
        });

        // 打开提交模态框
        $('#submitModal').modal('show');
      });
    });
  </script>
</body>
</html>

在这个示例中，我们创建了一个包含用户名、密码两个表单项的登录表单。在表单提交时，使用 AJAX 技术提交表单数据，并在发生错误时显示错误提示信息。具体实现方式请参考前面的示例代码和代码注释。

3.2 示例 2：表单提交时禁用按钮

下面是一个简单的表单提交示例，点击提交按钮时禁用按钮，防止用户多次重复提交。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery 表单提交禁用按钮</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <form>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" name="username" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" name="password" required>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary" id="submitBtn">提交</button>
      </div>
    </form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('form').submit(function(event) {
        event.preventDefault();  // 阻止表单默认提交事件的发生

        var formData = $(this).serialize();  // 获取表单数据

        $('#submitBtn').attr('disabled', true);  // 禁用提交按钮

        $.ajax({
          type: 'POST',
          url: 'your-backend-api-url',
          data: formData,
          success: function(response) {
            console.log(response);  // 在控制台打印后端返回的响应
            alert('提交成功！');  // 弹出提交成功提示框
          },
          error: function(xhr, status, error) {
            console.log(error);  // 在控制台打印出错信息
            alert('提交失败，请稍后再试！');  // 弹出提交失败提示框
          },
          complete: function() {
            $('#submitBtn').attr('disabled', false);  // 启用提交按钮
          }
        });
      });
    });
  </script>
</body>
</html>

在这个示例中，我们创建了一个包含用户名、密码两个表单项的表单。在点击提交按钮时，使用 AJAX 技术提交表单数据，并在请求完成后启用提交按钮。具体实现方式请参考前面的示例代码和代码注释。

以上就是关于 jquery 表单提交带错误信息提示的完整攻略和示例演示。希望对你有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery表单提交带错误信息提示效果 - Python技术站