使用iframe實現頁面無刷新提交表單
阿新 • • 發佈：2017-05-27
fin 友好 frame you itl 圖片 項目需求 scripts tel
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實現頁面無刷新提交表單