PHP基础
PHP教程
php框架
JavaScript
asp.net
AJAX
正则表达式
ASP
输入
banner图
图片脚本
导航/分类
form表单伪Ajax提交
有时候，你可能有这样的需求，就是提交表单的时候，不想刷新本页面。但你又不想用Ajax，有什么方法呢？这时可以在页面中用
和
实现。原理大概是这样实现的。</p><p> <img src="http://img.gxlcms.com//Uploads-s/new/2019-09-22-201922/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="http://img.gxlcms.com//Uploads-s/new/2019-09-22-201922/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="http://img.gxlcms.com//Uploads-s/new/2019-09-22-201922/1478582321138910.png" title="1478582321138910.png" alt="0dd8dca4-2c29-37ef-b158-a8ecff5b0661.png"/></p><p>然后在服务器端PHP后台这样处理</p><pre class="brush:php;toolbar:false"><?php header('Content-Type: text/html; charset=utf-8'); $html_str = ''; exit($html_str); ?></pre><p>由于提交到 iframe 窗口中，所以在代码必须用 window 的 parent 属性才能访问到父窗口。</p><p>那种文件伪Ajax上传的方式就是这样实现的。因为Ajax不支持文件上传，所以不想刷新本页面，这种方法非常有用。 </div> </div> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function(){ layui.code({ elem: 'pre', //默认值为.layui-code about:false, title:'form表单伪Ajax提交代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> <footer class="comm-footer"> <ul class="channels"> <li> <a target="_top" href="/system/">操作系统</a> </li><li> <a target="_top" href="/down/">程序下载</a> </li><li> <a target="_top" href="/jquery/">jquery插件库</a> </li><li> <a target="_top" href="/jiaoben/">编程</a> </li><li> <a target="_top" href="/db/">数据库</a> </li><li> <a target="_top" href="/tools/">在线工具</a> </li><li> <a target="_top" href="/framebook/">框架书籍</a> </li><li> <a target="_top" href="/xitongjiaocheng/">系统教程</a> </li><li> <a target="_top" href="/ruanjianxiazai/">软件下载</a> </li> </ul> <ul class="versions"> <li> <a href="https://m.gxlcms.com" class="active">触屏版</a> </li> <li> <a href="https://www.gxlcms.com" target="_top">电脑版</a> </li> </ul> <p><a href="https://beian.miit.gov.cn/" target="_blank" style="color:#ffffff"></a><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></p> </footer> </body> </html>
