POST提交后页面不跳转并显示提交结果的方法
今天工作上遇到了一个新任务，从技术方面说就是提交一个表单插入到表中并不跳转显示提交结果。一般可以想到的是通过AJAX来做。可是表单中有上传功能，这个就不能用AJAX了（AJAX不能传递FILES数组的数据）。只好还是用老办法IFRAME来做吧。以下简单记录一下实现步骤。
1、在from表单代码的上方添加一个iframe,显示为隐藏. 并添加一个函数供提交后调用。
<iframe id="supportiframe" name="supportiframe" onload="returnmessage();" >
2、在form 里添加一个target属性，参数设为iframe的name.
<form id="supportform" method="post" action="/home/supportpost"
target="supportiframe" enctype="multipart/form-data">
3、在表单提交后的处理页面中处理完成后显示出处理结果（类似于AJAX方法）
echo '<span id="suberror">'.$error.'</span>'
4、在iframe加载后的绑定函数中控制处理结果的显示。
function returnmessage(){
message = $(window.frames["supportiframe"].document)
.find("#suberror").html();
if(message != null){
$('.error').html(message).show();//将显示处理信息的DIV显示出来
$('#postsu').unbind();
$('#content,#screenshot').val(''); //清空表单中的值
$(this).click(function(){
$('.error').html('').hide(); //当再次点击页面中再次隐藏显示的处理信息
})
}
}
5、这样做有个坏处，在表单处理页面中就不能加上跳转功能了，跳转的结果会反应在被我们隐藏的iframe中.
总结：在form中添加了target后，处理表单的动作没有改变，应该谁处理就是谁处理（本身页面或action页面），只是处理后显示结果会显示在iframe中。而显示在iframe中的结果就是我们处理表单后的需要的结果，这是一种不刷新页面并显示处理结果的一个方法。就是利用了iframe实现了第二次加载页面。
本文如需转载,请务必注明：转载自：蓝色夏威夷 [http://www.coderbolg.com/]
本文链接地址： http://www.coderbolg.com/content/8.html
本文链接地址： http://www.coderbolg.com/content/8.html
评论列表