使用iframe实现页面无刷新提交表单
Posted 黄者之风
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用iframe实现页面无刷新提交表单相关的知识,希望对你有一定的参考价值。
iframe提交表单其实比ajax要方便一些,当然ajax也有ajax的好处,只是ajax编码处理有时有些麻烦,虽然经过转码是可以解决中文问题,但如果直接使用iframe不存这些问题了,下面来看看。
最近在做一个项目,用到上传图片功能,发现ajax不能enctype=”multipart/form-data” 属性的表单,没办法,只能使用form表单直接提交的方法了,但是form表单直接提交会跳转页面,这样很不友好,也不是项目需求,于是上网搜索了一番,发现可以使用隐藏的iframe来实现。
具体的原理是form表单提交到iframe里面处理,而这个iframe是隐藏的,所以提交表单的时候当前页面没有发生任何变化。
最重要的就是form的target属性指向iframe的name值,这样就实现了提交到隐藏的iframe中,那么返回值应该怎么获取呢?
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function () { $("#btnOK").click(function () { var frame1 = document.getElementById("frameFile1").contentDocument; //获取到iframe里面的html元素 var frameJson1 = JSON.parse($(frame1).find(‘pre‘).html()); console.log(frameJson1); }); }); </script> </head> <body> <form method="POST" action="/Home/Upload" enctype="multipart/form-data" target=‘frameFile1‘ id="form1"> <input type="file" name="file" id="myphoto"> <input type="submit" value="提交"> </form> <iframe name=‘frameFile1‘ id="frameFile1" style=‘display: block;‘></iframe> <input type="text" name="name" value=" " /> <input type="button" id="btnOK" value="确定" /> </body> </html>
以上是关于使用iframe实现页面无刷新提交表单的主要内容,如果未能解决你的问题,请参考以下文章