话不多说
提交方式
- formdata
- ajax
- iframe( 创建iframe 利用其内的form进行提交 )
首先, 检测提交的内容中是否包含 type为file的input, 没有则使用jquery的ajax进行提交；
包含file，检测浏览是否支持formdata，支持则使用该方式；
var formdata = new FormData();
/* 利用api append 添加内容 **/
ipts.forEach(function(ipt){ formdata.append(ipt.name, ipt.value || ipt.files[0]) })
/* ajax 设置(重点) **/
{
* contentType: false,
* processData: false,
cache: false
}
不支持 创建iframe进行提交 这里有几点值得注意的地方
- 判断iframe加载完毕
var iframe = document.createElement('iframe'); iframe.attachEvent ? iframe.attachEvent('onload', cb) : iframe.addEventListener('load', cb); - iframe内的form的target与iframe的name值一致
var id = 'random_' + (new Date().getTime());
iframe.setAttribute('name', id);iframe.setAttribute('src', 'about:blank');
form.setAttribute('target', id);
- 监听iframe内表单提交结果
var xhr = {
aborted: 0,
responseText: null,
responseXML: null,
status: 0,
statusText: 'n/a',
getAllResponseHeaders: function() {},
getResponseHeader: function() {},
setRequestHeader: function() {},
abort: function() {
this.aborted = 1;
$io.attr('src','about:blank'); // abort op in progress
}
};
var data, doc;
/* iframe 文档获取 **/
doc = iframe.contentWindow ? iframe.contentWindow.document
: iframe.contentDocument
? iframe.contentDocument
: iframe.document;
xhr.responseText = doc.body ? doc.body.innerHTML : null;
xhr.responseXML = doc.XMLDocument ? doc.XMLDocument : doc;
xhr.getResponseHeader= function(header)
{
var headers = { 'content-type': opts.dataType };
return headers[header]
}
if (opts.dataType == 'json' || opts.dataType == 'script')
{
var ta = doc.getElementsByTagName('textarea')[0];
xhr.responseText = ta ? ta.value : xhr.responseText;
}
else if (opts.dataType == 'xml' && !xhr.responseXML && xhr.responseText != null)
{
xhr.responseXML = toXml(xhr.responseText);
}
data = $.httpData(xhr, opts.dataType);
function toXml(s, doc)
{
if (window.ActiveXObject)
{
doc = new ActiveXObject('Microsoft.XMLDOM');
doc.async = 'false';
doc.loadXML(s);
}
else
doc = (new DOMParser()).parseFromString(s, 'text/xml');
return (doc && doc.documentElement && doc.documentElement.tagName != 'parsererror') ? doc : null;
};
$.httpData=function( xhr, type, s )
{
var ct = xhr.getResponseHeader( 'content-type'),
xml = type == 'xml' || !type && ct && ct.indexOf( 'xml' ) >=0,
data = xml ? xhr.responseXML: xhr.responseText;
if ( xml && data.documentElement.tagName == 'parsererror' )
throw 'parsererror' ;
if ( s && s.dataFilter )
data = s.dataFilter( data, type );
if ( typeof data === 'string' )
{
if ( type == 'script' ) jQuery.globalEval( data );
if ( type == 'json' ) data = window[ "eval" ]( '(' + data + ')' );
}
return data;
};
