jQuery | submit() 与示例

简介

submit() 方法是 jQuery 中的一个表单提交方法，在表单中调用这个方法可以实现提交表单的功能。

用法

submit() 方法的调用方式有两种：

方式一：

$("#formId").submit();

方式二：

$("form").submit(function(event){
  event.preventDefault(); // 阻止表单默认提交
  // 自定义提交实现
});

注意：第二种方式需要在 submit() 方法中加入 event.preventDefault()，否则会出现默认提交表单的情况。

示例

在下面的示例中，我们将演示如何使用 submit() 方法提交表单以及如何接收响应数据。

HTML

<form id="myForm" method="POST">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
</form>

<div id="response"></div>

JavaScript

$(document).ready(function(){
  $("#myForm").submit(function(event){
    event.preventDefault(); // 阻止表单默认提交
    $.ajax({
      url: "submit.php", // 表单数据提交到的地址
      type: "POST",
      data: $(this).serialize(), // 将表单数据序列化
      success: function(data){
        // 成功接收到响应
        $("#response").html("提交成功！");
      },
      error: function(){
        // 响应失败
        $("#response").html("提交失败！");
      }
    });
  });
});

在这个示例中，我们使用了 submit() 方法来阻止默认表单提交动作，并使用了 $.ajax() 方法来异步提交表单数据。在成功接收到响应的情况下，我们更新了页面上的 "response" 元素，告诉用户提交已经成功。如果出现错误，将显示提交失败的消息。

总结

使用 submit() 方法可以实现表单的提交，为表单的异步提交提供了很大的帮助。同时，我们还可以通过设置 $.ajax() 方法的参数来处理表单提交的响应。