一般的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>