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完成的回调中重新启动回调？或者你真的需要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();
}

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

2 个答案: