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

今天在做How2J上的一個js小練習時，發現在使用<button>按鈕提交表單后，使用js改變的頁面元素只是出現了一下后立即消失了。通過仔細研究才了解到：

在表單的提交按鈕如果沒有type屬性，在點擊提交按鈕后頁面會自動刷新，導致使用js改變的頁面元素被刷新掉了。

解決方法：

使用<input type="button"></input>代替<button>按鈕后解決。

錯誤代碼：

        <form>
            <input type="text" id="input1"/>
            <div id="d1" style="color: greenyellow"></div>
            <button id="button1" onclick="verify()">驗證</button>
        </form>

 

正確代碼：

        <form>
            <input type="text" id="input1"/>
            <div id="d1" style="color: greenyellow"></div>
            <input type="button" id="button1" value="驗證" onclick="verify()"/>
        </form>

 注意：

1、以上修改只解決了頁面刷新的問題，但修改后表單也不會提交了。

2、只要表單提交了，頁面就會刷新。

3、在form表單內的<input type="submit"/>標簽和<button></button>標簽都會提交表單（因為<button></button>標簽的默認type屬性是submit）。

4、所以要使頁面不刷新，只要不提交表單就可以了，修改按鈕只是一種方式。還有其他的方式可以阻止表單提交。

5、可以使用ajax技術實現提交表單，而頁面不刷新。