ASP.NET Core Razor Pages AJAX Post 400 Bad Request

2021-03-29 乐帮网

jquery ajax netcore

ASP.Net Core 的Razor Pages页面使用Jquery的Ajax Post提交数据，遇到错误：400 Bad Request。

页面如下：

<div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" />
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="password" />
            </div>
            <button type="submit" id="btnSubmit" class="btn btn-primary">Submit</button>

JavaScript代码如下：

   $(function () {
        $('#btnSubmit').click(function () {
            $.ajax({
                type: 'post',
                url: "./Index?handler=Login_Ajax",
                contentType: 'application/json;',
                data: { email: $('#email').val(), password: $('#password').val()},
                success: function (result) {
                    console.log(result);
                },
                complete: function (jqXHR, textStatus) {
                }
            });
        });
    });

后台接收数据代码如下：

public IActionResult OnPostLogin_Ajax(string email,string password)
{
    return new JsonResult(new { email= email, password = password });
}

这样写最终结果收到的错误是：400 Bad Request。
上面代码有多处错误，不一一指出了。正确的写法应该如下：

 <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" />
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="password" />
            </div>
            @Html.AntiForgeryToken()
            <button type="submit" id="btnSubmit" class="btn btn-primary">Submit</button>

JavaScript代码如下：

$(function () {
        $('#btnSubmit').click(function () {
            $.ajax({
                type: 'post',
                url: "./Index?handler=Login_Ajax",
                contentType: 'application/json; charset=utf-8',
                headers: {
                    RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
                },
                data: JSON.stringify({ email: $('#email').val(), password: $('#password').val()}),
                success: function (result) {
                    console.log(result);
                },
                complete: function (jqXHR, textStatus) {
                }
            });
        });
    });

后台接收数据代码如下：

 public IActionResult OnPostLogin_Ajax([FromBody] UserInfo user)
 {
       return new JsonResult(new { email = user.email, password = user.password });
}
   public class UserInfo
    {
        public string email { get; set; }

        public string password { get; set; }
    }

其中涉及到AntiForgeryToken，参数序列化等问题，旨在特意使用Json格式提交，我把代码整理成一个Demo提供下载。源码中同时列出了form提交数据的代码。
链接：https://pan.baidu.com/s/1jQepMcA6UkVjIIXbtFwWIQ

提取码可以点击最下方按钮来查看。

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力