如何使用 jQuery ajax 将函数用作数据

Question

为了减少重复的脚本，我创建了以下插件，只要data保持原样，它就可以工作。

$.fn.myValid = function(rules, options) {
    this.validate({
        rules: rules.rules,
        messages: rules.messages,
        submitHandler: function(form) {
            var o = Object.assign({},{
                type:'POST',
                url:null,
                data: $(form).serializeArray(),
                dataType: 'json',
                success: function (rsp){
                    //Instead of reloading page, do dynamicly
                    $.unblockUI();
                    alert('record submitted')
                    location.reload();
                },
                error: function (xhr) {
                    $.unblockUI();
                    alert(xhr.responseJSON.message);
                }
                }, options);
            //if (typeof o.data === "function") o.data=o.data(form);
            $.blockUI();
            $.ajax(o);
        }
    });
};

如果需要更改data ，我不能简单地返回类似$(form).serializeArray().concat($('#common-inputs').serializeArray(form))类的东西，因为form尚未定义，所以我想返回一个函数会起作用。 但是，当 ajax 被触发时， data是一个函数，而不是字符串、数组或普通对象，因此数据不会发送到服务器。

$('#help-form').myValid(validObj.common, {url:'ajax.php','data': function(form){
    console.log('this is never executed);
    return $(form).serializeArray().concat($('#common-inputs').serializeArray(form))
}});

作为一种解决方法，我包括o.data=o.data(form); （在上面的脚本中被注释掉）来执行返回结果的函数，它可以按需要工作。 但是，我希望它更像是一种 hack，并且有一种正确的方法可以做到这一点。

使用 jQuery ajax 将函数用作数据的正确方法是什么？

对于url 、 success等其他属性，解决方案会有所不同吗？

Answer 1

您可以使用beforeSend回调来设置数据值：

beforeSend: function( xhr, settings ) {
    this.data = $(form).serialize(); // or settings.data = $(form).serialize();
}, 

同样的方式你可以修改 url 和成功回调：

this.url = 'new-url';
this.success = newSuccessCallback;

类似的问题

请注意，这不适用于 GET 请求，但 POST 应该可以正常工作。

Answer 2

您的第一个问题：使用 jQuery ajax 将函数用作数据的正确方法是什么？

只要您要在函数调用中返回数据，函数就可以用于创建任何类型的数据。 与 jquery ajax 一样，这将是一个回调函数，您可以在需要时调用它。

# Example

function formData( form ) {
    // do anything
    return form.serialize();
}

var request = $.ajax({
    // set properties
    data: formData.call( context, form );
});

其他属性（如 url、成功等）的解决方案会有所不同吗？

对于成功回调，使用 .done() 方法或 .fail() 方法来处理错误

和网址：

function getFormURL( form ) {
    return form.attr('action');
}

网址：getFormURL.call（上下文，.form）；

Answer 3

如果要给远程api传一个动态参数，代码如下

$.ajax({
    uri: '/foo',
    ...,
    data: function() {
        param1: function() {
            return 'foo';
        },
        param2: function() {
            return $('input[name='bar']').val();
        }
    }
})