HTML表单元素中的form即表单是常用来提交用户数据的元素之一。通过AJAX技术可以友好的对用户请求进行反馈。无须刷新页面这是人尽皆知的事情了。
但表单事件中有一个另类，即onsubmit，这个事件之所以另类，是因为它在提交完以后，会自动刷新当前页面，使AJAX结果失效。这会让人困惑，以为AJAX反回失败。
e.g.
<html>
<head>
<script type="text/javascript">
<!--
function loadXML(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mydiv").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET","ajax.php?id="+url,true);
xmlhttp.send(null);
return false;
}
//-->
</script>
</head>
<body>
<form name="fm" οnsubmit="loadXML(fm.txt.value);">
<input type="text" name="txt" value="input"></input>
<input type="submit" name="sub" value="submit"></input>
</form>
<div id="mydiv"></div>
</body>
</html>
返回结果为空，div中的数据只在调试中变化了一下，高度结束自动刷新，AJAX结果就消失了。
如果一定要用submit，只需要将onsubmit替换为action
<form name="fm" action="javascript:loadXML(fm.txt.value);">
即可submit表单，也不用刷新页面了。这时候页面就显示正常的AJAX信息了。
扫一扫
1478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
