有时候,你可能有这样的需求,就是提交表单的时候,不想刷新本页面。但你又不想用Ajax,有什么方法呢?这时可以在页面中用<form>和<iframe>实现。原理大概是这样实现的。
大家注意到这个form的target的了么?这个target属性的值frameFile,是form之后的iframe的name值,这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面中表单处理,
并且不会产生当前页面跳转!
这个iframe拿到post过来的表单数据后会开始在自身内部访问post过来的页面地址,在内部中它会刷新页面,但是这已不重要了,因为当前的iframe已经被我display:none隐藏了!所以这样给用户看起来像是无刷新的页面,其实只是做一个一个小小的技巧!
现在的问题是你可能要在提交成功后给用户一个友好的提示,该怎么做到呢?
这是你可以先在页面中格式好一段HTML提示,然后把它隐藏起来,像下面这样子
然后在服务器端PHP后台这样处理
<?php header('Content-Type: text/html; charset=utf-8'); $html_str = '<script type="text/javascript"> window.parent.document.getElementById("join_circle_success_tip").innerHTML=\''.$html_str.'\'; window.parent.document.getElementById("join_circle_success_tip").style.display="block"; </script>'; exit($html_str); ?>
由于提交到 iframe 窗口中,所以在代码必须用 window 的 parent 属性才能访问到父窗口。
那种文件伪Ajax上传的方式就是这样实现的。因为Ajax不支持文件上传,所以不想刷新本页面,这种方法非常有用。
原文链接:http://woqilin.blogspot.com/2012/05/blog-post_4234.html
相关推荐
使用AJAX提交Form表单使用AJAX提交Form表单使用AJAX提交Form表单
ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)
Ajax如何无刷新提交form里面的内容。
使用AJAX提交Form表单实例演示
jquery.js + jquery-form.js + springMVC实现ajax提交form表单和上传图片,上传图片成功js可以获取图片保存相对路径。
Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。 在将 Bootstrap 窗体嵌入到 Bootstrap/jquery模式...
利用jquery的ajax提交表单数据到后台。后台使用spring.
完整的jq ajax提交表单,奖解压后jq文档加入页面中,调用就可惟了。 表单结构 <form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name" /> Comment: <...
这是一个ajax提交表单插件,支持文件上传,用起来非常方便。具体使用说明 http://blog.csdn.net/qq122453418/article/details/79511164 欢迎留言
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传.
ajax无刷新表单提交 2;ajax的运行历程 最简单明了的实例,清晰的帮你弄清上述概念,运行简单,只需解压该包,然后Myeclipse中file - import - general - import existed project to workspace,即可调试运行 调试...
主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下
本文实例讲述了jQuery ajax提交Form表单的方法。分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移...
Ajax表单提交插件jquery form
使用jQuery.form插件,实现完美的表单异步提交
java导入导出,全部文件jar包,ajax提交form表单后返回提示数据,所有用到的文件,方法,数据,有利于学习,方便运用
该例子是使用 Ajax 提交 Ext 表单,并通过 success 和 failer 返回相应的值。
ajaxform,ajax表单提交,方便客户端ajax验证,方便用户体验,人性化表单处理
本资源通过ajax实现对提交的form表单的验证,该代码不但有针对property验证,也有针对object验证,还有一个异步获取对象的实例;包含完整的代码和库文件;在myeclipse8.5和apache-tomcat-6.0.30测试通过;访问网址:...
主要介绍了jquery.form.js实现将form提交转为ajax方式提交的方法,涉及jQuery插件实现form表单的Ajax提交技巧,非常具有实用价值,需要的朋友可以参考下