jQuery 阻止表单提交的方法, 使用 jQuery

在本文中，我们将介绍如何使用 jQuery 阻止表单提交的方法。

使用 preventDefault() 方法

jQuery 提供了 preventDefault() 方法，可以阻止表单的默认提交行为。该方法的作用是取消事件的默认动作，比如表单的提交。下面是一个示例：

$("#myForm").submit(function(event){
  event.preventDefault(); // 阻止表单提交的默认行为

  // 其他处理逻辑
});

在上面的示例中，我们给表单绑定了 submit 事件，并在事件处理函数中使用 preventDefault() 方法阻止了表单的默认提交行为。你可以在该事件处理函数中添加其他的处理逻辑。

使用 return false

除了使用 preventDefault() 方法，我们还可以使用 return false 阻止表单提交。下面是一个示例：

$("#myForm").submit(function(){
  // 其他处理逻辑

  return false; // 阻止表单提交
});

在上面的示例中，当表单提交时，会执行该 submit 事件处理函数。在函数中我们可以添加其他的处理逻辑，并使用 return false 阻止表单的提交。

需要注意的是，使用 return false 不仅会阻止默认的提交行为，还会阻止事件的传播。这意味着该事件处理函数之后的代码也不会被执行。

示例说明

下面的例子演示了如何使用 preventDefault() 方法阻止表单的默认提交行为：

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

<script src="jquery.min.js"></script>
<script>
   $("#myForm").submit(function(event){ event.preventDefault(); // 阻止表单提交的默认行为 // 获取表单的数据 var name =$ ("#name").val();

    // 验证表单数据
    if(name === ""){
      alert("姓名不能为空");
      return false;
    }

    // 提交表单逻辑
    $.ajax({
      url: "submit.php",
      method: "POST",
      data: { name: name },
      success: function(response){
        alert("提交成功");
      },
      error: function(){
        alert("提交失败");
      }
    });
  });
</script>

在上面的例子中，我们首先给表单绑定了 submit 事件，并在事件处理函数中使用 preventDefault() 方法阻止了表单的默认提交行为。然后我们获取表单的数据，并进行了验证和提交的逻辑。

如果姓名输入框为空，则弹出提示框并返回 false 阻止提交。如果验证通过，则使用 jQuery 的 ajax 方法提交表单数据到后端的 submit.php 文件。