dwz 表单提交 html,dwz 文件上传表单提交 分析
眾所周知，因為Ajax不支持enctype="multipart/form-data"。所以如果想采用無刷新的方式提交文件，Ajax是不行的。采用變通，也是最簡單有效的方式是在頁面中嵌入一個隱藏的iframe實現，將form的target屬性指向這個iframe即可。dwz中也是使用這個方法。
首先，我們先來介紹下如何使用，然后再窺探下其內部實現。
只需要設置iframeCallback()函數即可， 這個函數是dwz內置的函數，整個提交過程由它負責。它需要帶有倆個參數：第一個參數為要提交的表單，一般為this即可，另一個是可選的參數callback，回調函數，負責處理表單返回值，如果不填默認調用dwz的ajaxDone(簡單顯示一些提示信息)方法。
而后臺，在處理完上傳的文件后，只需要返回一個json格式的字符串即可：
{
"statusCode":"200",
"message":"提交成功",
"navTabId":"",
"rel":"",
"callbackType":"",
"forwardUrl":"",
"confirmMsg":""
}
使用很簡單，下面我們就來分析下其內部執行過程，從iframeCallback函數開始：
源碼：
/**
* 帶文件上傳的ajax表單提交
* @param {Object} form
* @param {Object} callback
*/
function iframeCallback(form, callback){
var $form = $(form), $iframe = $("#callbackframe");//獲得要提交的表單及隱藏的iframe
if(!$form.valid()) {return false;}//驗證表單
if ($iframe.size() == 0) {//判斷這個隱藏的iframe是否存在，不存在則創建個
$iframe = $("").appendTo("body");
}
if(!form.ajax) {
$form.append('');
}
form.target = "callbackframe";//關鍵一句，將form的target屬性指向這個iframe
_iframeResponse($iframe[0], callback || DWZ.ajaxDone);//提交表單，并處理返回值，如果callback方法未設置，則使用默認的DWZ的ajaxDone
}
主要完成3件事：
1. 創建并獲得個iframe
2. 將form的target指向這個iframe
3. 設置回調函數callback
function _iframeResponse(iframe, callback){
var $iframe = $(iframe), $document = $(document);
$document.trigger("ajaxStart");
$iframe.bind("load", function(event){//為iframe綁定load事件，該事件中將處理返回
$iframe.unbind("load");
$document.trigger("ajaxStop");
if (iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || // For Safari
iframe.src == "javascript:'';") { // For FF, IE
return;
}
var doc = iframe.contentDocument || iframe.document;
// fixing Opera 9.26,10.00
if (doc.readyState && doc.readyState != 'complete') return;
// fixing Opera 9.64
if (doc.body && doc.body.innerHTML == "false") return;
var response;
if (doc.XMLDocument) {
// response is a xml document Internet Explorer property
response = doc.XMLDocument;
} else if (doc.body){
try{
response = $iframe.contents().find("body").text();//獲得body內的返回值，json格式，如下圖
response = jQuery.parseJSON(response);//轉為json對象
} catch (e){ // response is html document or plain text
response = doc.body.innerHTML;
}
} else {
// response is a xml document
response = doc;
}
callback(response);//調用預先設置的回調 函數，默認是DWZ的ajaxDone函數 });
}
提交表單，并獲得返回值，在將返回值傳入callback并調用
返回值處理：
ajaxDone:function(json){
if(json.statusCode == DWZ.statusCode.error) {
if(json.message && alertMsg) alertMsg.error(json.message);
} else if (json.statusCode == DWZ.statusCode.timeout) {
if(alertMsg) alertMsg.error(json.message || DWZ.msg("sessionTimout"), {okCall:DWZ.loadLogin});
else DWZ.loadLogin();
} else {//提交成功
if(json.message && alertMsg) alertMsg.correct(json.message);
};
}
根據返回狀態statusCode的不同，進行不同提示。當然我們也可以定義自己的statusCode，再通過自定義的callback，在將這個callback傳入iframeCallback函數即可。
下面來通過debug方式看看提交后的返回情況：
通過_iframeResponse方法內的如下倆句獲得body內的返回值：
response=$iframe.contents().find("body").text();
response=jQuery.parseJSON(response);
dwz上手并不難， 而對于有一定前端開發基礎的理解起來也是很容易的。
總結
以上是生活随笔為你收集整理的dwz 表单提交 html,dwz 文件上传表单提交 分析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： dwz打开自定义dialog
- 下一篇： dwz ajax分页,DWZ table