技術標籤：前端知識點pythonjsjavascriptajax

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。