使用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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM