模擬form提交數據

最近在作一個項目,發現ajax不能enctype=」multipart/form-data」 屬性的表單,沒辦法,只能使用form表單直接提交的方法了,可是form表單直接提交會跳轉頁面,這樣很不友好,也不是項目需求,因而上網搜索了一番,發現可使用隱藏的iframe來實現。html

具體的原理是form表單提交到iframe裏面處理,而這個iframe是隱藏的,因此提交表單的時候當前頁面沒有發生任何變化。ajax

 

<form method="POST" action="../upload" enctype="multipart/form-data" target='frameFile1' id="form1">     <input type="file" name="file" id="myphoto">     <input type="submit" value="提交"> </form> <iframe name='frameFile1' style='display: none;'></iframe>

最重要的就是form的target屬性指向iframe的name值,這樣就實現了提交到隱藏的iframe中,那麼返回值應該怎麼獲取呢?框架

target 自定義名字 ----- 出現於框架結構,將會在該名稱的框架內打開連接spa

 

var frame1 = document.getElementById("frameFile1").contentDocument; //獲取到iframe裏面的html元素 var frameJson1 = JSON.parse($(frame1).find('pre').html()); //根據獲取到的元素進行相應的操做

這樣的話基本上能夠模擬ajax的操做,實現無刷新提交表單。orm

相關文章
相關標籤/搜索