H5中如何阻止from表单跳转

时间:2024-10-21 07:11:04

1、我们先按正常情况创建一个form表单。

H5中如何阻止from表单跳转

2、最后加上一个submit提交按钮。

H5中如何阻止from表单跳转

3、打开页面,点击按钮,正常情况就是会提交数据,进行页面跳转。

H5中如何阻止from表单跳转

4、为了阻止form跳转,我们在form里添加一个onsubmit的事件,然后调用一个方法,注意要在调用的方法前面加上return

H5中如何阻止from表单跳转

5、我们创建调用的方法,假设这个方法就是进行ajax调用,异步提交数据的。

H5中如何阻止from表单跳转

6、在方法的最后, 我们加上return false; 这一句,这一行比较关键,页面不进行跳转就是靠它的。

H5中如何阻止from表单跳转

7、重新运行页面,点击提交按钮,可以看到有调用到方法里的逻辑,而且页面并不会跳转的。

H5中如何阻止from表单跳转
© 手抄报圈