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

debugcn 发表于 Dev

金球

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

 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);
        });

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

Yongqing Yu

我打开了“网络”选项卡，然后得到了：我得到了404（有点类似），方法“ save”的名称，类型“ xhr”和大小为45B。

404错误显然意味着url / routing错误。在这里解决它，您有两种方法可以实现。

第一种方式：

您可以按照以下步骤在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);
            })

第二种方式：

您可以使用Http动词属性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?}"); 
 });

调试结果：