如何将 ajax 发布到剃须刀页面处理程序？答案

【问题标题】：How to ajax post to a razor page handler?如何将 ajax 发布到剃须刀页面处理程序？
【发布时间】：2019-08-13 21:25:41
【问题描述】：

代码如下所示

HTML：

    <form class="col-sm-6" name="log" >
       <div class="form-group row">
                    <label class="col-sm-3 col-form-label"></label>
                    <div class="col-sm-7">
                        <input name='logText' class="form-control">
                    </div>
                </div>    
                <div class="form-group row">
                    <div class="col-sm-7 offset-sm-3">
                        <button class="btn btn-primary" id="submit">Submit</button>
                    </div>
                </div>

            </form>

Javascript：

        document.forms['log'].onsubmit = () => {

            let formData = new FormData(document.forms['log']);
            fetch('?handler=log', {
                method: 'post',
                body: new URLSearchParams(formData)
            })
                .then(() => {
                    alert('Posted using Fetch');
                });
            return false;
        };
    </script>

C#：

    public void OnPostLog(string logText)
    {

    }

ajax 帖子通过一个看起来像这样的请求

Request URL: https://localhost:44345/?handler=log
Request Method: POST
Status Code: 400 
Remote Address: [::1]:44345
Referrer Policy: no-referrer-when-downgrade

但是服务器返回 400。ajax get 工作正常。处理程序的整页帖子工作正常。只是不是给处理程序的 ajax 帖子。 Razor Pages 甚至支持此功能吗？

【问题讨论】：

Example AJAX call back to an ASP.NET Core Razor Page的可能重复

标签： javascript html asp.net-ajax razor-pages

【解决方案1】：

原因是，表单中嵌入了一个 __RequestVerificationToken。这需要在 ajax 发布期间提供。但是要将令牌添加到表单中，您必须将下面的 method="post" 添加到表单中。

        <form class="col-sm-6" name="log" method="post" >

来源：https://www.talkingdotnet.com/handle-ajax-requests-in-asp-net-core-razor-pages/

【讨论】：

【解决方案2】：

每当我使用 fetch API 时，我都会使用 FormData 对象作为请求的主体，而不是创建新的 URLSearchParams 对象。

希望对你有帮助。

【讨论】：