表单改变回车键/submit功能不自动提交表单（AJAX内容一闪而过）

一般的form表单默认回车键会提交表单，这会导致AJAX的内容在页面上一闪而过。因为提交后页面会跳转（刷新）

所以此时需要将表单中的submit按钮改为button按钮。或者修改submit的默认行为。

但之后还会出现问题，比如AJAX技术实现检索功能的时候表单中要有text类型元素，而回车键会自动触发submit功能。于是可以在表单中加入这一代码：

<form οnkeydοwn="if(event.keyCode==13) return false;">

如此，可以取消回车键的自动提交功能。

然而，新问题又出现了，这样的交互也太不友好了，检索按回车岂不是很方便，这么一搞回车就废了，非要点击按钮才可以。为了彻底解决这一问题，在text节点中加入属性onkeydown，修改回车键的行为，如下：

<form οnkeydοwn="if(event.keyCode==13) return false;">
		<input type="text" name="staffname" id="staffname" οnkeydοwn="if(event.keyCode==13) confirm();"/>
		<input type="button" value="OK" id="submit" οnclick="confirm()" />
	</form>

上例中的confirm为你自己定义的 js脚本函数。我把我的代码片完整粘出来，大家可以参考。（利用servlet作为后端）

<form οnkeydοwn="if(event.keyCode==13) return false;">
		<input type="text" name="staffname" id="staffname" οnkeydοwn="if(event.keyCode==13) confirm();"/>
		<input type="button" value="OK" id="submit" οnclick="confirm()" />
	</form>
	<p id="result"></p>
</div>
<script type="text/javascript">
function confirm(){
	var request=new XMLHttpRequest();
	request.open("post","servlet/SearchServlet",true);
	var data="staffname="+document.getElementById("staffname").value;
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	request.send(data);
	request.onreadystatechange=function(){
		if(request.readyState===4){
			if(request.status===200){
				document.getElementById("result").innerHTML=request.responseText;
				//alert("ok");
			}else{
				alert("发生错误："+request.status);
			}
		}
	}
}
		
</script>

以上，相互学习，自学记录~