AJAX无刷新提交表单的方法
2012-03-03 13:24
253 查看
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" onsubmit="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信息了。
但表单事件中有一个另类，即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" onsubmit="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信息了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX无刷新提交表单的方法
- Jquery基于Ajax方法自定义无刷新提交表单Form实例
- Jquery基于Ajax方法自定义无刷新提交表单Form实例
- 发布三个ajax相关的函数，包括无刷新提交表单等
- ajax提交表单实现网页无刷新注册示例
- 用html5自带表单验证 并且用ajax提交的解决方法
- Jquery中ajax提交表单几种方法(get、post两种方法)
- jquery的ajax提交form表单的两种方法小结(推荐)
- 使用ajax方法实现form表单的提交
- 用html5自带表单验证 并且用ajax提交的解决方法(附代码)
- Ajax异步提交表单数据的说明及方法实例
- 利用AjaxSubmit()方法实现Form提交表单后回调功能
- ajax post方式表单提交setRequestHeader报错解决方法
- 关于ajax提交表单，重复提交解决方法
- jQuery EasyUI 表单(Form)用法 ajax提交方法
- 利用ajaxSubmit()方法实现Form提交表单后回调
- php提交表单用Ajax方法大全
- 发布三个ajax相关的函数，包括无刷新提交表单等
- 使用ajax方法实现form表单的提交
- 方法封装-Ajax+Jquery提交表单