jQuery.iframe-Transport.js来发送Ajax文件上传请求对返回JSON的处理_H5之家

本文测试环境 jQuery 2.1.4

使用 jQuery.iframe-Transport.js （是一个jQuery插件）来发送Ajax文件上传请求时，服务器接口返回的是JSON数据，而测试的时候发现，Ajax请求后的结果却是一个HTML片段，服务器的JSON会包含在一个 <pre> 元素里，类似这样：

<head></head><body><pre style=\"word-wrap: break-word; white-space: pre-wrap;\">{\"ret\":1,\"msg\":\"文件大小超过限制\"}</pre></body>

原来必须要在 $.ajax 调用时设置 dataType 为 json 才可以正确处理服务器返回的JSON数据，并且 done 中的参数会是一个直接的JavaScript对象，完整的代码如下，HTML Form：

然后，每当用户选择一个文件后，立即上传，JavaScript如下：

// avatarUpload是上面的type = “file”的input元素 // 每当选择文件后立即发送Ajax请求 $('#avatarUpload').change(function() { //'upload'是具体发送POST请求针对的服务器URL $.ajax('upload', { type: 'POST', files: $('#avatarUpload'), iframe: true, // 注意如果服务器返回结果是JSON，dataType要设置 dataType: 'json' }).done(function(data) { // 这里data是JavaScript对象 console.log('done()', data); }).fail(function() { console.log('fail()'); }).always(function() { console.log('always()'); }); });