解決表單提交頁面自動刷新問題


Bug重現:

方式一

將<input>標簽內的按鈕類型從 type="submit" 修改為type="button"

方式二

表單內的<button>未指定類型,默認的類型為submit (除了IE瀏覽器是 button), 可以顯示的修改為<button type="button"></button>來阻止表單提交事件

方式三

事件阻止: preventDefault()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func(event){
            event.preventDefault();
            //執行ajax動作
        }
    </script>
</head>
<body>
    <form action="">
        <input type="submit" value="button" onclick="func(event)" /> 
    </form>
</body>
</html>

方式四

用onlick點擊事件來return false
1. onclick="return true" 為默認的表單提交事件
2. onclick="return false"為阻止表單提交事件
而一般用onclick來調用函數都是沒有返回值的,所以一般調用完成后為默認return true;所以才會看到,先處理回調函數后再進行表單提交跳轉

方式四

利用表單的onsumit事件
注意: onsubmit 事件作用對象是

所以把onsubmit事件加在提交按鈕上是沒效果的

form對象的onsubmit事件類似onclick,都是先處理調用的函數,再進行表單是否跳轉布爾值的判斷
1. onsubmit="return true" 為默認的表單提交事件
2. onsubmit="return false"為阻止表單提交事件

    <form id="frm" theme="simple" onsubmit="return false;"></form>

選擇時間


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM