通过AJAX将JSON对象发布到ASP.NET Core Web API

如何解决通过AJAX将JSON对象发布到ASP.NET Core Web API

我尝试了此网站上发布的其他方法，但是似乎没有任何效果。 我想创建一个服装网站（一个个人项目）。网站上的产品具有自己的类，其构建方式如下：

 public class Product
 {
      public string ProductName { get; set; }
      public string ProductPrice { get; set; }

      public int Quantity { get; set; }
 }

购物车是另一类，其中将包含Product对象的列表，并且该对象的构建方式如下：

public class ShoppingCart
{
    [Key]
    public int Id { get; set; }
    List<Product> ProductList { get; set; }

    public string ClientName { get; set; }

    public string ClientAddress { get; set; }

    public string ClientMail { get; set; }
}

我创建了一个API Controller类，并认为可以解决该问题。看起来像这样：

[Route("api/Shopping")]
[ApiController]
public class ShoppingCartController : ControllerBase
{
    [HttpPost]
    public ShoppingCart Save([FromBody] ShoppingCart s)
    {
        return s;
    }
}

在我的JavaScript代码中，我创建了JSON对象，并尝试将其发布为：

 var orderB = document.getElementById("orderB");
    orderB.addEventListener("click",function () {
        var inputName = document.getElementById("inputName").value;
        var inputAddress = document.getElementById("inputAddress").value;
        var inputMail = document.getElementById("inputMail").value;
        var auxArray = [];

        for (var i = 0; i < productsAux.length; i++) {
            auxArray[i] = { "productName": productsAux[i].titlu,"productPrice": productsAux[i].pret,"quantity": localStorage.getItem(productsAux[i].titlu)};
        }

        var shoppingCart = {
            productList: auxArray,clientName: inputName,clientAddress: inputAddress,clientMail: inputMail
        };

        $.ajax({
            type: "POST",data: JSON.stringify(shoppingCart),url: "api/shopping/save",contentType: "application/json charset=utf-8",}).done(function (res) {
            alert(res);
        });
       

按下页面上的订单按钮后，我希望看到弹出带有弹出结果的警报，我认为这是使用我发送的JSON创建的ShoppingCart对象。

解决方法

我打开了“网络”标签，得到了：我得到了404（ 期望），方法“ save”的名称，类型“ xhr”和 大小为45B。

404错误显然表示 URL /路由错误 。在这里解决它，您有两种方法可以实现。

第一种方式：

您可以将Ajax中的URL更改为“ api / shopping” ，如下所示：

        $.ajax({
                type: "POST",data: JSON.stringify(shoppingCart),url: "api/shopping",contentType: "application/json charset=utf-8",}).done(function (res) {
                alert(res);
            })

第二种方式：

您可以更改路径名 Attribute routing with Http verb attributes 的Save操作中，如下所示：

            [Route("api/Shopping")]
            [ApiController]
            public class ShoppingCartController : ControllerBase
            {
                [HttpPost("Save")]
                public ShoppingCart Save([FromBody] ShoppingCart s)
                {
            
                    return s;
                }
            }

更新

根据您的评论，除了上述更新之外，您还需要按以下方式修改路由设置：

 app.UseEndpoints(endpoints =>
 {
                endpoints.MapControllerRoute(
                    name: "default",pattern: "{controller=Home}/{action=Index}/{id?}"); 
 });

调试结果：

,

对于以后的内容，我建议您检查两端类型是否正确。例如，如果您的JS发布一个字节数组，而C＃尝试将其转换为int，则整个对象（不仅仅是该prop）将为null。

这吸引了我很多次。