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上手并不难， 而对于有一定前端开发基础的理解起来也是很容易的。