Question

我最近在我的一个项目中使用了许多Ajax方法，因为在每个$ .ajax调用中，您必须编写许多相同的代码，例如：

{
  type:'POST', // Default value is 'GET'
  beforeSend: function(xhr){
    // Usually do some Page Loading Animation stuff here
  },
  error:function(){
    // Handling the Exceptions here
  }
}

因此，我将Ajax调用封装到一个名为JAjax的类中，如下所示：

(function ($) {

// More details, see: http://api.jquery.com/jquery.ajax/
var defaults = {
    data: {},
    url: '',
    type: 'POST',
    dataType: 'JSON',
    isOverlay: true,
    async: true,
    cache: true,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    processData: true,
    overlayTarget: $(document.body),
    dealyClean: 500,
    f_before: function () {},
    f_done: function () { },
    f_always: function () { },
    f_fail: function (xhr) {
        if (xhr.status !== 200) {
            // Handling the Exceptions
        }
    }
};

function JAjax(_options) {
    this.options = $.extend({}, defaults, _options);
    this.execute();
}

function createOverLayer(options) {
    // Create a page loading animation layer
}

JAjax.prototype = {
    execute: function () {

        var parent = this;

        var response = $.ajax({
            data: parent.options.data,
            url: parent.options.url,
            type: parent.options.type,
            dataType: parent.options.dataType,
            contentType: parent.options.contentType,
            async: parent.options.async,
            cache: parent.options.cache,
            processData: parent.options.processData,
            beforeSend: function (xhr) {
                parent.options.f_before();
                if (parent.options.isOverlay) {
                    createOverLayer(parent.options);
                }
            }
        });

        response.done(parent.options.f_done);
        response.always(parent.options.f_always);
        response.fail(parent.options.f_fail);

    }
};

jQuery.extend({
    jajax: function (_options) {
        _options = _options || {};
        if (typeof _options === 'object') {
            return new JAjax(_options);
        }
    }
});
})(jQuery);

对于大多数Ajax请求（GET，POST），它工作正常。但是，当我使用它上载一些文件时，该文件将成功上载到服务器并作为执行结果返回给我一个文件名（字符串）。但是以某种方式，它不会触发f_done函数，以下是我使用它上传文件的方式：

var url = '/ajax_common_file_upload';
var file_data = new FormData();
for (var i = 0; i < _files.length; i++) {
    var file = _files[i];
    file_data.append('input_files[]', file);
}

$.jajax({
    url: url,
    data: file_data,
    cache: false,
    contentType: false,
    processData: false,
    f_done: function (result) {
        // Never to be executed :-(
        alert('show me something, please!');
    }
});

我花了几天的时间来弄清楚为什么它不“显示我什么”但全部失败了，将非常感谢有人可以帮助我并解释为什么当我使用f_done（）方法时无法触发它来上传文件。

更新：我在请求标头上为JAjax和原始$ .ajax制作了一些屏幕截图，并将它们合并在一起，如下所示：

我使用相同的参数对JAjax和$ .ajax发出请求，但我不知道为什么它们具有不同的Accept值！

有人吗？

Answer 1

仍然无法触发f_done（）函数！！！但是由于我可以在f_always（）上执行相同的操作，因此我将跳过此步骤并继续前进。我会将这篇文章保持公开状态，并始终感谢您提出任何建议！

将Ajax调用封装到一个类中，当我使用它上载文件时效果很奇怪

1 个答案: