javascript - 如何在 jQuery serialize() 函数中包含按钮值？

Question

我在表单中有两个按钮。

    <button type="submit" class="btn btn-danger" value="Send Back" name="Save">Send Back</button>
    <button type="submit" class="btn btn-primary" value="Approve" name="Save">Approve</button>

当我使用 jquery $.ajax() 发布表单数据时，表单数据首先被序列化。

(function () {
    'use strict';
    function process(event) {
        event.preventDefault();
        var $form = $(this);
        var data = $form.serialize();
        console.log('posted data', data);

        $.ajax({
            type: 'POST',
            url: url,
            data: data
        }).done(function(data) {
             ...
        });
    }
    $(document).on('submit', 'form', process);
})();

在我的 console.log() 的输出中，我可以看到表单中的所有其他字段都已序列化，但提交按钮上的值丢失了。

是否有一些设置可以告诉 jQuery 包含 serialize() 函数的按钮值？

Answer 1

借助 document.activeElement，您可以知道单击了哪个按钮。

因此，如果您想要按钮的值，只需获取 value 属性，对其进行编码并放入 uri 参数的末尾即可。

(function () {
    'use strict';
    function process(event) {
        event.preventDefault();
        var $form = $(this);
        var data = $form.serialize()+'&save='+encodeURI(document.activeElement.getAttribute('value'));
        console.log('posted data', data);

        $.ajax({
            type: 'POST',
            url: url,
            data: data
        }).done(function(data) {
             ...
        });
    }
    $(document).on('submit', 'form', process);
})();