• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

使用jQuery提交不刷新页面的表单

ngkoma • 2年前 (2022-05-15) • JavaScript

在本教程中，我将向您展示做到这一点是多么容易——使用 jquery 验证和提交联系表单，而无需刷新页面！让我们开始吧。

我们正在建造什么

在此示例中，我们有一个简单的联系表单，其中包含姓名、电子邮件和电话号码。该表单使用原生 jQuery 函数将所有字段提交到php脚本，无需任何页面刷新。

1. 构建 html 表单

让我们看一下我们的 HTML 标记。我们从基本的 HTML 表单开始：

  <div id="contact_form">
  <form name="contact" action="">
    <fieldset>
      <div class="input-box">
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" minlength="3" placeholder="Monty" class="text-input" required/>
      </div>
      
      <div class="input-box">
      <label for="email" id="email_label">Email</label>
      <input type="email" name="email" id="email" placeholder="example@www.weixiaolive.com" class="text-input"/>
      </div>
      
      <div class="input-box">
      <label for="phone" id="phone_label">Phone</label>
      <input type="tel" name="phone" id="phone" class="text-input" placeholder="856-261-9988"/>
      </div>
      
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    </fieldset>
  </form>
    <div class="greetings">
    <h1>Contact US</h1>
      <p>We are waiting to hear from you!</p>
    </div>
  </div>

您可能会注意到我  在整个表单中包含了一个div 带有 id 的内容。contact_form

请务必不要 div 以您自己的形式错过它，因为我们稍后将需要这个包装器 div 。您可能还注意到我将表单标记的操作和方法部分都留空了。我们实际上在这里不需要任何一个，因为 jQuery 会在以后处理这一切。

另一个重要的事情是确保包含 id 每个输入字段的值。这些 id 值是您的 jQuery 脚本在处理表单时要查找的值。

我们还使用html5属性（如 required 和 ）进行了一些非常基本的客户端验证minlength。该 minlength 属性将确保用户提供至少三个字符长的名称。同样，该 required 属性确保用户填写您需要的所有表单值。

您可以在我们关于仅使用 HTML5 和 Regex 验证表单输入的教程中阅读有关这些属性的更多信息 。

使用jQuery提交不刷新页面的表单 第1张

仅使用 HTML5 和正则表达式的 HTML5 表单输入验证 Monty Shokeen

我添加了一些css样式来生成以下表单：

* {
  box-sizing: border-box;
}
body {
  font-family: 'Roboto Slab';  font-size: 1.5rem;
  font-weight: 300;
}
div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}
div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}
div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}
div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}
input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}
h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}
div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient(15deg, transparent 28%, rgba(255, 255, 255, 0.5) 28%);
  background-size: 50px;
}
div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}
div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}

使用jQuery提交不刷新页面的表单 第2张

2. 开始添加jQuery

该过程的下一步是添加一些 jQuery 代码。我假设你已经 下载了 jQuery，上传到你的服务器，并且 在你的网页中引用了它。

接下来，打开另一个新的 javascript 文件，在 HTML 中引用它，就像在任何普通的 JavaScript 文件中一样，并添加以下内容：

  $(function() {
     // set up form validation here
  });

该函数在 HTML 文档准备好后立即运行。如果你之前在 jQuery 中做过任何工作，这个函数和 jQuery 的 document.ready 函数是一样的。在里面，我们将设置我们的验证码。

3. 编写一些表单验证

我们现在将使用 jQuery 编写一些基本的表单验证。这将改进我们迄今为止的验证。使用验证库可以让我们更好地控制向用户显示的错误消息。它还需要对表单的标记进行最少的更改或不需要更改。

 首先在您的网页上加载 jQuery Validation 库。现在，只需添加以下代码：

$(function () {
  $("form").validate();
});

validate() 确保在调用方法时传递了正确的选择器 。这将验证表单，而无需您在 HTML 中编写任何错误消息或在 javaScript 中显示和隐藏不同错误消息的逻辑。尝试在不填写任何值或故意添加错误输入的情况下提交表单。该表单将显示一个很好的错误消息，如下图所示。

使用jQuery提交不刷新页面的表单 第3张

使用验证库还允许您向表单添加条件验证逻辑。例如，只有在未提供电子邮件地址时，您才能添加需要电话号码的代码。我在jQuery 表单验证教程中对此进行了更详细的介绍 。

使用jQuery提交不刷新页面的表单 第4张

使用 jQuery Monty Shokeen 的 JavaScript 简单表单验证

4.使用 jQuery ajax函数 处理表单提交

现在我们进入教程的核心——提交表单而不刷新页面，它将表单值发送到后台的 PHP 脚本。让我们先看一下所有代码，然后我将其分解为更详细的内容。在我们之前添加的验证片段下方添加以下代码：

$( "form" ).on( "submit", function(e) {
    var dataString = $(this).serialize();
    
    // alert(dataString); return false;
    $.ajax({
      type: "post",
      url: "bin/process.php",
      data: dataString,
      success: function () {
        $("#contact_form").html("<div id='message'></div>");
        $("#message")
          .html("<h2>Contact Form Submitted!</h2>")
          .append("<p>We will be in touch soon.</p>")
          .hide()
          .fadeIn(1500, function () {
            $("#message").append(
              "<img id='checkmark' src='images/check.png' />"
            );
          });
      }
    });
    e.preventDefault();
  });
});

这里发生了很多事情！让我们把它全部分解——一旦你了解了这个过程，它就非常简单易用。

我们首先创建一个值字符串，它们是我们想要传递给发送电子邮件的脚本的所有表单值。这可以很容易地使用 serialize() jQuery 中的内置方法来实现。这样您就不必担心自己获取和连接不同有效用户输入的值。

我已经注释掉了一个警告，我有时会使用它来确保我获取了正确的值，您可能会在此过程中发现它很有帮助。如果您取消注释该警报并测试您的表单，假设到目前为止一切正常，您应该会收到类似于以下内容的消息：

使用jQuery提交不刷新页面的表单 第5张

现在我们来看看我们的主要 AJAX 函数，即今天节目的主角。这是所有动作发生的地方，所以要密切注意！

$("form").on("submit", function (e) {
    var dataString = $(this).serialize();
    
    $.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function () {
        // Display message back to the user here
      }
    });
    e.preventDefault();
});

基本上，代码中发生的事情是这样的：该 .ajax() 函数处理来自我们 使用名为bin/processdataString 的 PHP 脚本调用 的字符串中的值。php，使用 HTTP POST 方法类型。如果我们的脚本处理成功，我们可以向用户显示一条消息，最后  页面不会重新加载。就是这样！整个过程就在这几行中处理！return false

除了提供成功信息之外，您还可以在此处执行更高级的操作。例如，您可以将值发送到数据库，对其进行处理，然后将结果显示给用户。因此，如果您向用户发布投票，您可以处理他们的投票，然后返回投票结果，这一切都不需要任何页面刷新。

让我们总结一下我们的示例中发生的事情，以确保我们已经涵盖了所有内容。我们使用 jQuery serialize() 方法获取表单值，然后将它们放入字符串中，如下所示：

var dataString = $(this).serialize();

然后我们使用 jQuery 的 ajax() 函数来处理 dataString. 该过程成功完成后，我们向用户显示一条消息， return false 这样我们的页面就不会刷新：

    $.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
    });
    return false;

脚本的成功部分已经填充了一些可以返回给用户的特定内容。但就我们的 AJAX 功能而言，仅此而已。有关更多选项和设置，请务必查看 jQuery 关于 ajax 函数的文档。这里的示例是更简单的实现之一，但即便如此，它仍然非常强大，如您所见。

5. 向用户显示一条消息

让我们简要看一下将我们的消息显示给用户的代码部分，以完成本教程。

首先，我们使用以下行更改 #contact_form div （记住我说过我们需要它div）的全部内容：

  $('#contact_form').html("<div id='message'></div>");

html() 这使用 jQuery 的函数替换了联系表单中的所有内容 。div 因此，我们现在有了一个带有idof 的 new 而不是一个表单 message。接下来，我们用一个实际的消息填充该 div：一个 h2 说 Contact Form Submitted：

  $('#message').html("<h2>已提交联系表格！</h2>")

我们将使用 jQuery 函数为消息添加更多内容， append() 最重要的是，我们通过使用 jQuery 函数隐藏消息 div 来添加一个很酷的效果 hide() ，然后使用该 fadeIn() 函数将其淡入：

  .append("<p>我们会尽快与您联系。</p>")
  .hide()
  .fadeIn(1500, function() {
    $('#message').append("<img id='checkmark' src='images/check.png' />");
  });

因此，用户在提交表单后最终会看到以下内容：

使用jQuery提交不刷新页面的表单 第6张

结论

到现在为止，我想你必须同意，使用 jQuery 的强大 ajax() 功能在不刷新页面的情况下提交表单是非常容易的。只需获取 JavaScript 文件中的值，使用 ajax() 函数处理它们，然后返回 false. 您可以像处理任何其他 PHP 文件一样处理 PHP 脚本中的值，唯一的区别是用户不必等待页面刷新——这一切都在后台静默进行。

因此，如果您的网站上有联系表单、登录表单，或者更高级的表单可以通过数据库处理值并检索结果，那么您可以使用 AJAX 轻松高效地完成这一切。

文章目录
  • 我们正在建造什么
  • 1. 构建 html 表单
  • 2. 开始添加jQuery
  • 3. 编写一些表单验证
  • 4.使用 jQuery ajax函数 处理表单提交
  • 5. 向用户显示一条消息
  • 结论

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：使用jQuery提交不刷新页面的表单
    文章地址：https://www.weixiaolive.com/en/index.php/post/23.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云