如果启用了 [防伪令牌]，则无法从 JQuery 访问操作方法

本文关键字：JQuery 操作方法 访问 启用 令牌 如果 | 更新日期: 2023-09-27 17:56:28

我有一个工作正常的 JQuery 函数，但是如果我在操作方法上启用[AntiForgerToken]，JQuery 函数无法访问操作方法，在视图上我还有其他代码段启用了防伪令牌：

@using (Html.BeginForm("InsertStudent","Students",FormMethod.Post, new { @id="myform"}))
{
    @Html.AntiForgeryToken()

视图内的@Html.AntiForgeryToken()是否启用都没关系，JQuery 函数运行良好，有问题的函数在操作方法上......

为什么会这样？我错过了什么？？我已经阅读了在操作后方法上启用[AntiForgeryToken]安全性非常重要，因此我认为应用程序应该在操作方法和视图两个位置都启用它。

JQuery 函数：

function InsertShowStudents() {
    var counter = 0;
    $.ajax({        
        type:"post",
        url: "/Students/InsertStudent/",
        data: { Name: $("#Name").val(), LastName: $("#LastName").val(), Age: $("#Age").val() }
    }).done(function (result) {
        if (counter==0) {
        GetStudents();
        CounterStudents();
            counter = 1;
        }
        else {
            $("#tableJQuery").append("<tr>"+"<td>"+result.Name+"</td>"+"<td>"+result.LastName+"</td>"+"<td>"+result.Age+"</td>"+"</tr>")
        }
        //clear the form
       $("#myform")[0].reset();
    }).error(function () {
        $("#divGetStudents").html("An error occurred")
    })
}

操作方法：

 [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult InsertStudent(Student student)
        {
            if (ModelState.IsValid)
            {
                db.Students.Add(student);
                db.SaveChanges();
                //ModelState.Clear();
                return RedirectToAction("InsertStudent");
            }
            return View(student);
        }

表的列：

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
      @* <td style="display:none" class="tdStudentID">@Html.DisplayFor(modelItem => item.StudentID)</td>    *@  
        <td>
            <img src="~/images/deleteIcon.png" width="20" height="20" class="imgJQuery" data-id="@item.StudentID" />
        </td>
       <td>
           @Html.ActionLink("Details","Details", new { id=item.StudentID})
       </td>
    </tr>
}

如果启用了 [防伪令牌]，则无法从 JQuery 访问操作方法

您没有在 ajax 调用中传递令牌的值，因此会引发异常。您可以使用以下方法获取令牌的值

var token = $('[name=__RequestVerificationToken]').val();

并修改您的 ajax 调用以包含它

data: { __RequestVerificationToken: token, Name: $("#Name").val(), LastName: $("#LastName").val(), Age: $("#Age").val() }

但是，序列化包含令牌的表单更容易

$.ajax({        
    type:"post",
    url: '@Url.Action("InsertStudent", "Students")', // don't hardcode your url's
    data: $('#myform').serialize(),
}).done(function (result) {

旁注：Ajax 调用从不重定向（ajax 的全部意义在于保持在同一页面上），因此在您的InsertStudent()中return RedirectToAction("InsertStudent");是行不通的。此外，您返回的 html，因此.done()回调中的$("#tableJQuery").append()代码将失败。

看起来您有一个表单来添加新Student因此您的方法只需要返回指示成功或其他方式的JsonResult，如果成功，则可以根据表单中的值向表中添加新行，例如

}).done(function (result) {
    if (result) {
        var row = $('<tr></tr>');
        row.append($('<td></td>').text($("#Name").val()));
        ... // add other cells
        $("#tableJQuery").append(row);
        //clear the form
        $("#myform")[0].reset();
    } else {
        // Oops something went wrong
    }
})
相关文章：