我如何在 Razor 页面中序列化表单并发送 JSON 请求 Ajax [重复]

Posted 2023-03-27

【中文标题】我如何在 Razor 页面中序列化表单并发送 JSON 请求 Ajax [重复]

【英文标题】：How I can serialize form and send JSON request Ajax in Razor Pages [duplicate]

【发布时间】：2019-04-06 09:30:18

【问题描述】：

我有一个带有列表复选框和三个输入文本的表单，我想发送它 以 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);
 

谢谢。

【参考方案1】：

您的代码不起作用的原因是因为您在将数据作为 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 结果，这就是你的代码失败的原因。

当前接受的答案似乎有效，因为它不发布 JSON（根据您的问题，这是要求）。值作为标准 URL 编码的名称/值对发布。

如果你真的想发布 JSON，你需要对表单值进行字符串化。

【讨论】：

“提交”前的“:”是什么意思？

这只是一个 CSS 选择器。它将匹配<input type="submit">。只需将其替换为您的选择器：#show

谢谢，但我不明白我必须做什么才能接受这个 json？

通常，您只会将 JSON 发布到需要 JSON 并且可以处理它的服务，例如 Web API 控制器。您通常不会将 JSON 发布到 Razor 页面。