解决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技术实现提交表单，而页面不刷新。