在H5中轻松阻止表单提交的页面跳转

在H5等Web开发中，表单（form）是一个常见且重要的元素。通常情况下，当我们提交表单时，页面会进行跳转。然而，在某些应用场景下，如弹出层、连续提交多条记录，或页面中存在多个需要局部提交的表单时，我们可能不希望页面进行跳转。那么，在H5中，我们该如何阻止表单提交时的页面跳转呢？

一、基础表单提交与跳转

首先，让我们先了解一下基础表单的创建和提交。一个简单的表单可能包含一些输入字段和一个提交按钮，如下所示：

```html

```

在这个例子中，当用户点击“提交”按钮时，表单的数据会被发送到`/api/xxx/action`这个地址，并且页面会跳转到该地址所指向的页面。

二、阻止表单跳转的方法

方法一：使用onsubmit事件和return false

要在表单提交时阻止页面跳转，我们可以使用`onsubmit`事件，并在事件处理函数中返回`false`。这可以通过直接在表单标签中添加`onsubmit`属性来实现，如下所示：

```html

```

在这个例子中，当点击“提交”按钮时，`onsubmit`事件会被触发，并且因为返回了`false`，所以表单的提交会被阻止，页面也不会跳转。

另外，我们也可以在JavaScript中定义一个函数来处理表单提交，并在该函数中返回`false`。如下所示：

```html

function handleSubmit() {

// 处理表单数据的代码

return false; // 阻止表单提交

```

方法二：使用JavaScript的preventDefault()方法

除了返回`false`之外，我们还可以使用JavaScript的`preventDefault()`方法来阻止表单的默认提交行为。这通常是通过在`onsubmit`事件处理函数中调用`event.preventDefault()`来实现的。如下所示：

```html

function submitForm(event) {

event.preventDefault(); // 阻止表单提交时的跳转

// 处理表单数据的代码

```

在这个例子中，当点击“提交”按钮时，`onsubmit`事件会被触发，`submitForm`函数会被调用，并且`event.preventDefault()`会阻止表单的默认提交行为，从而阻止页面跳转。

方法三：将表单提交方式改为AJAX

除了使用`onsubmit`事件和`return false`或`preventDefault()`方法之外，我们还可以将表单的提交方式改为AJAX。这样，表单的数据可以通过AJAX异步提交到服务器，而不会引起页面的跳转。

使用jQuery来实现AJAX表单提交是非常方便的。如下所示：

```html

$(document).ready(function() {

$('myForm').submit(function(event) {

event.preventDefault(); // 阻止表单提交时的跳转

$.ajax({

type: 'POST', // 表单提交方式

url: '/api/xxx/action', // 表单提交的地址

data: $('myForm').serialize(), // 表单数据

success: function(data) {

// 处理表单提交成功后的结果

},

error: function() {

// 处理表单提交失败后的结果

});

});

});

```

在这个例子中，当点击“提交”按钮时，`submit`事件会被触发，`event.preventDefault()`会阻止表单的默认提交行为，然后jQuery的`$.ajax()`方法会被用来异步提交表单数据到服务器。

方法四：将type="submit"改为type="button"

除了上述方法之外，我们还可以通过将提交按钮的`type`属性从`submit`改为`button`来阻止表单的提交和页面跳转。但是，需要注意的是，这种方法只是阻止了按钮的默认提交行为，如果表单中还有其他提交按钮或触发表单提交的方式（如JavaScript代码），则可能仍然会导致表单提交和页面跳转。因此，这种方法通常不是阻止表单提交的首选方法。

```html

function handleSubmit() {

// 处理表单数据的代码

// 注意：这里不会阻止表单提交，因为按钮的type是button

// 但由于没有其他提交按钮或触发表单提交的方式，所以表单不会提交

```

然而，通常我们会在`onclick`事件处理函数中调用`event.preventDefault()`（如果可用）或返回`false`来确保表单不会被提交。

三、总结

在H5中阻止表单提交时的页面跳转有多种方法，包括使用`onsubmit`事件和`return false`、使用JavaScript的`preventDefault()`方法、将表单提交方式改为AJAX以及将提交按钮的`type`属性从`submit`改为`button`。选择哪种方法取决于具体的应用场景和需求。在大多数情况下，使用`onsubmit`事件和`return false`或使用`preventDefault()`方法是比较简单和直接的方式；而在需要异步提交表单数据的情况下，使用AJAX则是一个更好的选择。