返回与 ajax 对象一起使用的承诺

Question

我有一个函数，我将 form 元素传递到其中，以便使用 AJAX 处理表单提交。

我想从我的函数返回将处理表单提交的 ajax 对象，以便我可以附加额外的done 回调——问题是我不知道如何在不创建它的情况下返回 ajax 对象（并执行它）首先。

我怎样才能用 promise 代替实际的 ajax 对象，以便我返回一些东西来附加额外的回调？

HandleModalFormSubmit: function (element) {
    var form,
    modalcontainer = $(element).closest('.modal'),
        modal = $(element).closest('.modal-dialog'),
        ajaxdata;


    if (element.is('form')) form = $(element);
    else {
        form = element.find('form');
    }

    $.validator.unobtrusive.parse(form);

    $(element).on('submit', function (event) {
        event.preventDefault();
        ajaxdata = $.ajax({
            type: form.method,
            url: form.action,
            data: $(form).serialize()
        }).done(function (data) {
            if (data.status == null) {
                modal.html(data);
            } else {
                modalcontainer.modal('hide');
            };
        }).always(function (data) {
            modal.spin(false);
            modal.fadeTo(500, 1);
        });
        modal.fadeTo(300, 0);
        modal.spin();
    });
    var returningobject = {
        element: form,
        ajax: ajaxdata
    };
    return returningobject;
}
}

编辑：这是我希望函数发生的事情

 var formobject = $Global.HandleAjaxForm(element);
                formobject.ajax.done(function(data1) {
                    if (data1.status == 'ok')
                        window.location.href = (data.redirectToUrl == null) ? "~/Dashboard" : data.redirectToUrl;
                });

Answer 1

是否可以将回调附加到函数并在 ajax done 回调中触发该回调？或者你真的需要 ajax 对象本身而不是附加一个 done() 监听器

HandleModalFormSubmit: function (element, callBack) {
    var form,
    modalcontainer = $(element).closest('.modal'),
        modal = $(element).closest('.modal-dialog'),
        ajaxdata;


    if (element.is('form')) form = $(element);
    else {
        form = element.find('form');
    }

    $.validator.unobtrusive.parse(form);

    $(element).on('submit', function (event) {
        event.preventDefault();
        ajaxdata = $.ajax({
            type: form.method,
            url: form.action,
            data: $(form).serialize()
        }).done(function (data) {
            if (data.status == null) {
                modal.html(data);
            } else {
                modalcontainer.modal('hide');
            };

          //call the callback within the done function of the ajax object here
          if(callBack && typeof callBack == "function") callBack.call(context, params);
        }).always(function (data) {
            modal.spin(false);
            modal.fadeTo(500, 1);
        });
        modal.fadeTo(300, 0);
        modal.spin();
    });
    var returningobject = {
        element: form,
        ajax: ajaxdata
    };
    return returningobject;
}
}

很明显，这不会给你 ajax 对象本身，但你可以插入回调并踢出你需要的任何参数。

编辑： 您还可以返回 jquery ajax 函数本身 像这样：

HandleFormSubmit : function(){
   return $.ajax({});
}

然后你可以像这样附加你的完成方法：

HandleFormSubmit().done(function(){
});

Answer 2

尝试创建自己的延迟

HandleModalFormSubmit: function (element) {
    var form,
    modalcontainer = $(element).closest('.modal'),
        modal = $(element).closest('.modal-dialog'),
        ajaxdata, $deferred = jQuery.Deferred();


    if (element.is('form')) form = $(element);
    else {
        form = element.find('form');
    }

    $.validator.unobtrusive.parse(form);

    $(element).on('submit', function (event) {
        event.preventDefault();
        ajaxdata = $.ajax({
            type: form.method,
            url: form.action,
            data: $(form).serialize()
        }).done(function (data) {
            if (data.status == null) {
                modal.html(data);
            } else {
                modalcontainer.modal('hide');
            }
            $deferred.done.apply(this, arguments);
        }).always(function (data) {
            modal.spin(false);
            modal.fadeTo(500, 1);
            $deferred.always.apply(this, arguments);
        }).fail(function () {
            $deferred.fail.apply(this, arguments);
        });
        modal.fadeTo(300, 0);
        modal.spin();
    });
    var returningobject = {
        element: form,
        ajax: ajaxdata
    };
    return $deferred.promise();
}