使用jquery.form插件的ajaxSubmit上传文件时,在IE、chorme会出现下载文件的提示框,在查看了jquery.form的源码时,发现了下面的代码:
if (options.iframe !== false && (options.iframe || shouldUseFrame)) { if (options.closeKeepAlive) { $.get(options.closeKeepAlive,function() { fileUploadIframe(a); }); } else { fileUploadIframe(a); } } else if ((hasFileInputs || multipart) && fileAPI) { fileUploadXhr(a); } else { $.ajax(options); }
在ajaxSubmit提交表单的时候,如果表单内有文件上传的话,会判断参数是否配置的iframe为false参数,如果没有,会用创建隐藏iframe方式提交表单,如果设定了iframe为false,则判断浏览器是否支持HTML5的fileAPI,支持就直接使用XHR方式提交,否则就当作普通表单提交。
因为是用隐藏iframe提交的表单,如果服务器返回的是“application/json”类型的数据,IE和Chrome默认是下载文件的,因为内容是返回给了iframe,而不是ajaxSubmit的success方法。在iframe加载了返回结果后,ajaxSubmit的success方法是去读取iframe的内容来转换成json对象使用。
解决办法
在ajaxSubmit提交表单时,返回“text/html”类型的内容,普通的ajax则返回“application/json”的内容。
Map<String,String> map = new HashMap<String,String>();
map.put("","");
returnData = JSONObject.fromObject(map);
response.setContentType("text/html");
response.getWriter().println(jsonObject.toString());
返回“text/html”类型的内容可能会出现的问题
如果需要解析file的内容,且file的内容包含“,”、“{”、“}”,可能会破坏json object的结构,导致ajaxSubmit无法以json格式解析返回的data,抛出如下错误:
ajaxsubmit SyntaxError: JSON.parse: expected ',' or '}' after property value
为fix这个问题,可以将$.ajaxsubmit的dataType属性设为text,但如此,需要手动的解析返回的json string,比较困难,建议以简单的form submit()方法,提交form到后台,然后利用model返回data,避免ajaxsubmit SyntaxError,可是无法避免刷新页面,违背了ajax局部刷新的初衷。