jQuery表单序列化提交Zapier：去除参数前缀与括号问题

我有一个需推送数据至Zapier的表单，使用jQuery将表单输入序列化为数组后通过reduce方法处理，代码如下：

$(function() {
    $("#lead-gen-form").submit(function() {
        const formInputSerializedArray = $(this).serializeArray();
        const ajaxData = formInputSerializedArray.reduce((acc, { name, value }) => ({ ...acc, [name]: value }), {});
        $.ajax({
            url: "",
            type: "POST",
            data: { ajaxData },
            dataType: "jsonp",
            cache: false,
            success: function(data) {
                window.location = "../sent";
            },
        });
        return false;
    });
});

当前提交的参数会包含ajaxData前缀并在输入名称外添加括号，结果如下：

ajaxData[utm_campaign]: test
ajaxData[utm_term]: 12
ajaxData[utm_content]: comm
ajaxData[utm_medium]: email
ajaxData[utm_source]: sig

我期望得到的参数格式为：

utm_campaign: test
utm_term: 12
utm_content: comm
utm_medium: email
utm_source: sig

请问如何修改代码以实现该需求？

解决方案 #

问题出在$.ajax的data参数配置上：你使用了{ ajaxData }的对象简写语法，这会把已经处理好的扁平ajaxData对象，再包裹到一个键为ajaxData的外层对象里，最终导致请求参数带上前缀。

只需要将data: { ajaxData }修改为data: ajaxData，直接传递处理后的扁平对象作为请求参数即可。

修改后的完整代码：

$(function() {
    $("#lead-gen-form").submit(function() {
        const formInputSerializedArray = $(this).serializeArray();
        const ajaxData = formInputSerializedArray.reduce((acc, { name, value }) => ({ ...acc, [name]: value }), {});
        $.ajax({
            url: "",
            type: "POST",
            data: ajaxData, // 直接传递处理后的参数对象
            dataType: "jsonp",
            cache: false,
            success: function(data) {
                window.location = "../sent";
            },
        });
        return false;
    });
});

内容的提问来源于stack exchange，提问作者Nick