我如何序列化表单并在 Razor Pages 中发送 JSON 请求 Ajax

Question

我有一个带有列表复选框和三个输入文本的表单，我想发送它在服务器上以 json 格式并接受它。我该怎么做？我试过了

$(function () {
    $('#show').click(function () {
        var ser = $(this).closest('form').serialize();
        $.ajax({
            url: '/Index',
            type: 'POST',
            data: JSON.stringify(ser),
            dataType: 'json',
            success: successFunc
        });
    });
});
function successFunc(data, status) {
    alert(data);
}

谢谢。

Answer 1

您的代码不起作用的原因是当您 post 数据为 JSON:

时，您需要 add a header for the Request Verification token to the AJAX request

$(function(){
    $(':submit').on('click', function (e) {
        e.preventDefault();
        var data = $(this).closest('form').serializeArray();
        $.ajax({
            url: $(this).closest('form').attr('action'),
            headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
            type: 'POST',
            data: JSON.stringify(data),
            contentType: "application/json"
        });
    });
});

如果不这样做，您会得到 400 Bad Request 结果，这就是您的代码失败的原因。

当前接受的答案似乎有效，因为它不 post JSON（根据您的问题，这是必需的）。值被 post 编码为标准 URL 编码的 name/value 对。

如果您确实想要 post JSON，您需要将表单值字符串化。

我如何序列化表单并在 Razor Pages 中发送 JSON 请求 Ajax

How I can serialize form and send JSON request Ajax in Razor Pages

jquery

.net-core

asp.net-core

razor-pages