有时候，你可能有这样的需求，就是提交表单的时候，不想刷新本页面。但你又不想用Ajax，有什么方法呢？这时可以在页面中用 和实现。原理大概是这样实现的。<p> <img src="https://img.php.cn//upload/image/128/865/548/1478582298579392.png" title="1478582298579392.png" alt="8fdec549-afbf-3863-8a7c-1f5969b48250.png"></p> <p>大家注意到这个form的target的了么？这个target属性的值frameFile,是form之后的iframe的name值,这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面中表单处理，<br>并且不会产生当前页面跳转!</p> <p> <img src="https://img.php.cn//upload/image/850/913/865/1478582315754508.png" title="1478582315754508.png" alt="79d2328e-9169-3bbf-91a0-aff0f80399e7.png"></p> <p> 这个iframe拿到post过来的表单数据后会开始在自身内部访问post过来的页面地址,在内部中它会刷新页面，但是这已不重要了，因为当前的iframe已经被我display:none隐藏了！所以这样给用户看起来像是无刷新的页面，其实只是做一个一个小小的技巧！ </p> <p>现在的问题是你可能要在提交成功后给用户一个友好的提示，该怎么做到呢？</p> <p>这是你可以先在页面中格式好一段HTML提示，然后把它隐藏起来，像下面这样子</p> <p> <img src="https://img.php.cn//upload/image/758/278/312/1478582321138910.png" title="1478582321138910.png" alt="0dd8dca4-2c29-37ef-b158-a8ecff5b0661.png"></p> <p>然后在服务器端PHP后台这样处理</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><?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); ?></pre><div class="contentsignin">登录后复制</div></div><p>由于提交到 iframe 窗口中，所以在代码必须用 window 的 parent 属性才能访问到父窗口。</p> <p>那种文件伪Ajax上传的方式就是这样实现的。因为Ajax不支持文件上传，所以不想刷新本页面，这种方法非常有用。</p> <p><br></p>
