javascript - 如何使用 ajax 发布到 razor 页面处理程序？

Question

代码如下所示

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 是否支持此功能？

Answer 1

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

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

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