form 表单伪 Ajax 提交_PHP_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > PHP > form 表单伪 Ajax 提交

form 表单伪 Ajax 提交

 2016/5/12 5:34:21  王之子  程序员俱乐部  我要评论(0)
  • 摘要:有时候,你可能有这样的需求,就是提交表单的时候,不想刷新本页面。但你又不想用Ajax,有什么方法呢?这时可以在页面中用<form>和<iframe>实现。原理大概是这样实现的。大家注意到这个form的target的了么?这个target属性的值frameFile,是form之后的iframe的name值,这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面中表单处理,并且不会产生当前页面跳转
  • 标签:for Ajax 表单

? ? 有时候,你可能有这样的需求,就是提交表单的时候,不想刷新本页面。但你又不想用Ajax,有什么方法呢?这时可以在页面中用<form>和<iframe>实现。原理大概是这样实现的。

?

monospace; font-size: small;">

?

?

大家注意到这个form的target的了么?这个target属性的值frameFile,是form之后的iframe的name值,这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面中表单处理,
并且不会产生当前页面跳转!

?



?

?

?这个iframe拿到post过来的表单数据后会开始在自身内部访问post过来的页面地址,在内部中它会刷新页面,但是这已不重要了,因为当前的iframe已经被我display:none隐藏了!所以这样给用户看起来像是无刷新的页面,其实只是做一个一个小小的技巧!

? ??

? ?现在的问题是你可能要在提交成功后给用户一个友好的提示,该怎么做到呢?

?

?

? ?这是你可以先在页面中格式好一段HTML提示,然后把它隐藏起来,像下面这样子

?



?

?

然后在服务器端PHP后台这样处理

?

class="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

?

?

?

个人主页:?https://plus.google.com/+sherlockwang/posts

  • 大小: 4.7 KB
  • 大小: 2.9 KB
  • 大小: 2.8 KB
  • 查看图片附件
发表评论
用户名: 匿名