Submit禁止提交的两种方式：preventDefault

Submit禁止提交的两种方式

这是一个很小的错误，但是花了5h去找错误，这里分享给大家。

首先，当我们想提交一个表单的时候，他默认的方式是将表单内所有的东西变成一个byte放在request的body里，给后端去使用，而当我们需要使用json数据的时候这个功能就有些鸡肋了，后端会一直报json的错误。此时我们就需要禁止submit的默认提交方式，让程序使用我们自己的函数去提交。默认的方法就是使用preventDefault。

问题就出现在这里：对谁去preventDefault。

先写一个简单的html

<form action="" method="post" class="form-contain">
    <div class="form-item">
        <input type="tel" placeholder="请输入手机号" name="telephone" class="form-control" autocomplete="off">
    </div>
    <div class="form-item">
        <input type="password" placeholder="请输入密码" name="password" class="form-control">
    </div>
    <div class="form-login">
        <input type="submit" value="登录" class="login-btn">
    </div>
</form>

这里就涉及两个方法，来对submit进行处理。

第一种：form

如果我们使用form，那就可以先获取这个form，然后将这个from的submit属性禁止。

一下用jquery操作：

$(function(){
    let $login = $(".form-contain"); // 通过class选择器，将form获取
    
    // 进行登录操作
     $login.submit(function (e) {
        // 阻止默认提交操作
        e.preventDefault();
         
        ...
    })
})

这里我们对form的submit进行阻止。我们再来看看第二种，然后进行一个对比：

第二种：按钮

如果我们是想直接从按钮入手，就需要获取这个按钮，然后再禁止属于他的这个操作。

$(function(){
    let $login = $(".flogin-btn"); // 通过class选择器，获取登录按钮
    
    // 进行登录操作
     $login.click(function (e) {
        // 阻止默认提交操作
        e.preventDefault();
         
        ...
    })
})

这个时候就必须是使用click，如果你使用submit就会出现不管你里面写的是什么东西，程序都会跳过这个函数（我就是在这里卡了半天）

比较

我们就拿第二种按钮来对submit和click进行处理操作：

html还是上面的操作，我们来写两个函数：

$(function(){
    let $login = $(".flogin-btn"); // 通过class选择器，获取登录按钮
    
    $login.submit(function(e){
        // 假的阻止
        e.preventDefault();
        
        console.log("2");
    })
    
    $login.click(function(e){
        // 真的阻止
        e.preventDefault();
        
        console.log("1");
    })
})

上面的函数，特意把submit放在上面，我们就看看concole是否会出现“2”

可以发现，不管我们按多少次按钮，都只会出现1，而这个2始终无法出现，就是因为对于这个submit来说，他只是一个input框，类型是submit。只是执行click，当click事件触发之后去调用form的submit，所以可以简单的说这个submit对于我们现在这个按钮来讲啥都不是。如果想使用submit就必须对form进行操作。

因此，如果你获取的是input框，那就得使用click。如果获取的是form那就得使用submit。