阻止表单默认提交行为

原创于 2019-01-27 22:29:22 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

FrontEnd 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用JavaScript阻止HTML表单的默认提交行为，通过返回false或调用preventDefault()方法，实现使用Ajax发送JSON数据到Restful接口，而非传统表单提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Event Handler属性

<form>
        <input name="name">
        <button type="submit" name="child">submit</button>
 </form>

这里有一个简单的表单，可以使用返回值false来阻止表单默认提交。

var form=document.getElementsByTagName("form").item(0);
form.οnsubmit=function () {
        return false;
 }

观察表单是否默认提交的方法是，观察网址栏是否变成了带参的路径。

addEventListener方式注册的EventHandler

对于这样注册的事件：

  form.addEventListener("submit",validate,false);
    function validate(e) {

        console.log("I am executed")
        console.log(e.target)
        e.preventDefault()
    }

可以使用e.preventDefault()来阻止表单默认提交

应用场景

对于我来说，应用场景是将表单数据以JSON格式发送给Restful接口时用到了，使用Ajax发送HTTP POST请求，而不是使用表单默认提交方式。