如何将ajax发布到剃刀页面处理程序?

时间:2019-03-22 20:22:28

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

代码看起来像这样

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。ajaxget可以正常工作。向处理程序发送整页的帖子效果很好。只是不是将ajax发布到处理程序。 Razor Pages甚至支持此功能吗?

2 个答案:

答案 0 :(得分:0)

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

希望有帮助。

答案 1 :(得分:0)

原因是,表单中嵌入了一个__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/