Asp.net中AJAX登录请求返回完整页面问题求助

报错翻译 #

具体报错信息翻译为：'意外的标记'<'，"\r\n\r\n<!DOCTYPE "... 不是有效的JSON"

问题原因 #

返回整个网页而非预期JSON，本质是后端未正确匹配到你的LoginFunc处理方法，导致请求被路由到默认页面（或错误页面），而非返回JSON响应。

修复步骤 #

• 修正URL与路由匹配
  确保你的Razor页面文件名为Login.cshtml（对应LoginModel），且放置在Pages目录下。AJAX请求的URL/Login?handler=LoginFunc是正确的，但表单的action="/LoginFunc"可以删除（已通过event.preventDefault()阻止默认提交，留着易混淆）。

• 修复后端方法参数绑定
  Razor Pages中接收JSON请求需使用[FromBody]特性，直接绑定到模型更规范，修改后端代码如下：

  public class LoginModel : PageModel
  {
      public async Task<IActionResult> OnPostLoginFuncAsync([FromBody] LoginRequest request)
      {
          // 这里可添加用户名密码验证逻辑
          return new JsonResult(new { status = "success" });
      }
  }
  
  public class LoginRequest
  {
      public string Username { get; set; }
      public string Password { get; set; }
  }
  

  若坚持使用JsonDocument，需为参数标注[FromBody]，但模型绑定更易维护。

• 确保防伪令牌存在
  在HTML表单内添加防伪令牌字段，Razor Pages中可通过@Html.AntiForgeryToken()生成，否则请求会被ASP.NET Core拦截并返回错误页面：

  <form id="login" method="post">
      @Html.AntiForgeryToken()
      <!-- 原有表单内容 -->
  </form>
  

• 优化AJAX响应处理
  后端返回对象而非纯字符串，避免JSON解析潜在问题，同时优化AJAX错误日志输出：

  function AJAXfunc(username, password) {
      var parameter = JSON.stringify({ "username": username, "password": password })
      $.ajax({
          type: "POST",
          contentType: 'application/json; charset=utf-8',
          url: '/Login?handler=LoginFunc',
          data: parameter,
          dataType: 'json',
          headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
          success: function (data) {
              console.log(data.status); // 输出success
              // 后续业务处理逻辑
          },
          error: function (xhr, status, error) {
              console.error("请求错误:", error, xhr.responseText);
          }
      })
  }
  

内容的提问来源于stack exchange，提问作者Fitchings