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

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

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

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

<form onkeydown="if(event.keyCode==13) return false;">

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

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

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

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

<form onkeydown="if(event.keyCode==13) return false;"><input type="text" name="staffname" id="staffname" onkeydown="if(event.keyCode==13) confirm();"/><input type="button" value="OK" id="submit" onclick="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>

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