jQuery AJAX отправить сообщение форма запроса параметры пустые

Question

Я пытаюсь отправить форму сообщения с jQuery AJAX. Я сделал сценарий для этого. После того, как я запустил этот скрипт в консоли на странице и успешно выполнил (потому что он получил AJAX успеха), но параметры запроса были пусты. Как это возможно? Я запутался, пожалуйста, кто-нибудь поможет мне с этим.

Моя форма:

<form method="post" action="/foo/bar" name="foobar">
    <h2>Nickname</h2>
    <div style="height: 20px;"></div>
    <div class="form-group">
        <div class="row">
            <div class="col-xs-8">
                <input type="text" class="form-control" id="nickname" name="nickname" value="">
            </div>
        </div>
    </div>

    <div class="checkbox">
        <input type="checkbox" name="accept" id="accept" value="1" checked="">
    </div>
    <div style="height: 10px;"></div>
    <p>
        <button class="btn btn-primary" id="voteBtn">Vote <i class="fa fa-check"></i></button>
    </p>
</form>

Мой сценарий:

$('form[name=foobar]').on('submit', function(e) {
    e.preventDefault();
    var data = {
        "nickname": "foobar",
        "accept": 1
    }
    $.ajax({
        type: "POST",
        url: "/foo/bar",
        contentType: "application/x-www-form-urlencoded",
        data: data,
        xhr: function() {
            // Get new xhr object using default factory
            var xhr = jQuery.ajaxSettings.xhr();
            // Copy the browser's native setRequestHeader method
            var setRequestHeader = xhr.setRequestHeader;
            // Replace with a wrapper
            xhr.setRequestHeader = function(name, value) {
                // Ignore the X-Requested-With header
                if (name == 'X-Requested-With') return;
                // Otherwise call the native setRequestHeader method
                // Note: setRequestHeader requires its 'this' to be the xhr object,
                // which is what 'this' is here when executed.
                setRequestHeader.call(this, name, value);
            }
            // pass it on to jQuery
            return xhr;
        },
        success: function(result) {
            console.log(result);
        },
        error: function(xhr, status, error) {
            alert(xhr.responseText);
            alert(status);
            alert(error);
        }
    });
});

 $('form[name=foobar]').trigger('submit')

Данные формы, которые отправляются вместе с ajax запрос, как-то пусто:

ОБНОВЛЕНО для @Phil и @ Не пани c

Я обновил код выше с упомянутым подходом @Phil, почтовый запрос действительно произошел, как я видел на вкладке сети. Но все же параметры были пустыми в запросе.

Заголовки запроса:

Request URL:http://localhost/foo/bar
Request method:POST
Remote address:0.0.0.0:443
Status code:302
Version:HTTP/2.0
Referrer Policy:strict-origin-when-cross-origin

Accept */*
Accept-Encoding gzip, deflate, br
Accept-Language en-US,en;q=0.5
Connection keep-alive
Content-Length 15
Content-Type application/x-www-form-urlencoded
Cookie __cfduid=d725b2ea3db135064a15f…cookiecheck-252793=Nmt9t15ppF
Host minecraft-mp.com
Referer http://localhost/foo
TE Trailers
User-Agent Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/68.0

И это данные формы, отправленные с запросом, все еще пустые ...? Как это возможно, когда я передаю объект «data» с запросом ajax.

nickname
accept  1