關於提交form不刷新的問題

最近在做一個項目，除去主頁面是html頁面，點擊菜單按鈕都由ajax加載生成，在這種情景下，F5刷新或者提交form表單就會將頁面回復到剛剛打開主頁面。

現在有一個這樣的場景，點擊子菜單生成一個子頁面，在子頁面有一個添加按鈕，如圖：

在點擊添加按鈕后會出現一個模態框，將信息錄入，如圖：

如果直接使用form表單提交那么就會將整個頁面刷新，與預想的結果不符，於是在網上找到了設置form的target方法，在這個模態框中設置一個不可見的iframe。

<form id="upLoadApp" action="XXX" target="id_iframe" enctype="multipart/form-data" method="post">
</form>
<iframe id="id_iframe" name="id_iframe" style="display: none;">
</iframe> 

但是這樣的話，提交到iframe就無法獲取表單回顯的數據進行下一步的操作了，於是想起來action跳轉后相當於重新加載一次頁面，於是就在iframe的onload屬性加入以下方法，

獲取 iframe中的數據方法是： window.frames['id_iframe'].document.getElementsByTagName('pre')[0].innerHTML

<form id="upLoadApp" action="XXX" target="id_iframe" enctype="multipart/form-data" method="post">
</form>
<iframe id="id_iframe" name="id_iframe" style="display: none;" onload="var data = JSON.parse(window.frames['id_iframe'].document.getElementsByTagName('pre')[0].innerHTML);if(data.returnCode == 0){dialog.destroy();myCommonDT.ajax.reload();}else{alert(data.returnMessage);}">
</iframe> 

這樣在表單提交到iframe后就可以執行onload方法從而獲取到返回的json數據

但是這樣做的話第一次加載時頁面會發出警告，如圖