如何在mvc中通过ajax将数据POST到api控制器？

Question

我想通过ajax将字符串数据POST到mvc中的api控制器，但它不会发送到api控制器！ 这就是我尝试过的

这是我的js代码：

        jQuery(function () {
    $(function () {
        $(".listing-listing").html("");

        const jsonData = { PageNom: 1, ShowInPage: 25 };
        var data =JSON.stringify(jsonData);
        $.ajax({
            url: '/Api/apiListProduct/AjaxSearchAsync',
            type: 'POST',
            data: data,
            dataType: 'jsonResult',
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                if (result.Data.Succeed) {
                    result.Data.ProductLst.foreach((product) => AddProduct(product));
                    //$('.PaginationCell').html(result.Data.Pagination);
                }
            },
            error: function (e) {
            }
        });
    })
})

and this is my api controller

  public class apiListProduct : ApiController {
  [System.Web.Http.HttpPost]
    public async System.Threading.Tasks.Task<System.Web.Mvc.JsonResult> AjaxSearchAsync()
    {
        string raw = "";
        using (var contentStream = await Request.Content.ReadAsStreamAsync())
        {
            contentStream.Seek(0, System.IO.SeekOrigin.Begin);
            using (var sr = new System.IO.StreamReader(contentStream))
            {
                raw = sr.ReadToEnd();
            }
        }
}

也感谢您帮助此 api 控制器的 web api 路由。

Answer 1

我想通过ajax将字符串数据POST到mvc中的api控制器，但是 它不会转到 api 控制器！这就是我尝试过的。我怎么能够 在mvc中通过ajax将数据POST到api控制器？

嗯，根据您的描述、场景和共享代码，如果您能共享完整的API控制器代码，您使用的是asp.net core的哪个版本，会更方便。

但是，根据您的代码片段，我最初发现了两个问题。

首先，不确定你的 API 路由是如何定义的，所以是的，这很重要。

另一个问题是，

Request.Content.ReadAsStreamAsync

，您可能试图读取请求正文。相反，您应该使用 HttpContext.Request.Body 读取请求正文内容。因为这会获取或设置请求主体 Stream。

如何解决：

为了解决您的问题，我尝试了以下方式并相应地工作。

让我们在实践中看看如何将您的ajax请求提交给API控制器：

API控制器：

[Route("api/[controller]")]
[ApiController]
public class ApiListProductController : ControllerBase
{
    [HttpPost]
    [Route("AjaxSearchAsync")]
    public async Task<IActionResult> AjaxSearchAsync()
    {
        string raw = "";
        using (var contentStream = HttpContext.Request.Body)
        {
            using (var sr = new System.IO.StreamReader(contentStream))
            {
                raw = await sr.ReadToEndAsync();
            }
        }
        return Ok(raw);
    }
}

注意： 如果您的 API 项目与 MVC 项目分开，您可以删除控制器操作上方的路由注释

[Route("AjaxSearchAsync")]

。但如果 API 控制器和 MVC 控制器位于同一个项目中，那么您应该使用显式路由。

请求负载：

要求身体：

输出：

替代方法：

或者，您可以使用强类型模型来获取从 ajax 请求发布的请求参数。您可以使用以下型号。

public class SearchModel
{
    public int PageNom { get; set; }
    public int ShowInPage { get; set; }
}

控制器：

[HttpPost]
[Route("AjaxSearchAsyncAproachTwo")]
public async Task<IActionResult> AjaxSearchAsyncAproachTwo(SearchModel searchModel)
{

    return Ok(searchModel);
}

请求有效负载：

请求正文：

注意：根据我的测试，我发现您的 javascript/Jquery 代码是正确的。因此，要读取请求正文或请求参数，您可以遵循上述任一方式。另外，请参考这个官方文档。