Question

我已经编写了在购物车上添加商品的代码。我只有在重新加载页面后才能添加项目。但是我想添加项目而不重新加载页面。这是我的脚本：

 <script>
    $(document).ready(function () {
        $("#addToCart").click(function () {
            var productId = $('#productId').val();
            var productName = $('#productName').val();
            var unitPrice = $('#unitPrice').val();
            var quantity = $('#quantity').val();
            var image = $('#Image').val();
            addItemToCart(productId, productName, quantity, unitPrice, image);
        });
    });

    function addItemToCart(productId, productName, quantity, unitPrice, image) {
        var getProduct = {};
        getProduct.Name = productName;
        getProduct.Image = image;
        getProduct.unitPrice = unitPrice;
        var product = {};
        product.Product = getProduct;
        product.ProductId = productId;
        product.Quantity = parseInt(quantity);
        product.Price = parseFloat(unitPrice) * parseInt(quantity);
        product.Product.unitPrice = unitPrice;
        $.ajax({
            type: "POST",
            url: "/Product/GetCartData",
            data: JSON.stringify(product),
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            crossDomain: true,
            success:function()
            {
                var url = '/Product/Details?ProductId=' + productId;
                window.location.href = url;
            }
        });
    }
</script>

这是我的动作玩具

    public JsonResult GetCartData(OrderDetail details)
    {
        if (Session["OrderDetails"] != null)
        {
            orderDetails = (List<OrderDetail>)Session["OrderDetails"];
            int flag = 0;
            foreach (var order in orderDetails)
            {
                if (order.ProductId == details.ProductId)
                {
                    order.Quantity += details.Quantity;
                    order.Price += details.Price;
                    flag = 1;
                }
            }
            if (flag == 0)
            {
                orderDetails.Add(details);
            }
            Session["OrderDetails"] = orderDetails;
        }
        else
        {
            orderDetails = new List<OrderDetail>();
            orderDetails.Add(details);
            Session["OrderDetails"] = orderDetails;
        }
        return Json(orderDetails);
    }

这是布局页面

@using EFreshStore.Models.Context
@using EFreshStore.Models.Context
@{
    List<OrderDetail> orderDetails =new List<OrderDetail>();
    int countItem = 0;
    string totalAmount = "0";
    if (Session["OrderDetails"] != null)
    {
        orderDetails = (List<OrderDetail>)Session["OrderDetails"];
        countItem = orderDetails.Count;
        totalAmount=orderDetails.Sum(c => c.Price).ToString();
    }
    List<ProductUnit> productUnits = (List<ProductUnit>)Session["ProductUnit"];
}
<!DOCTYPE html>
<html class="no-js" lang="">
<head>

</head>
<body class="home-one">

<div class="header-chart">
    <ul class="list-inline">
        <li><a href="#"><i class="fa fa-cart-arrow-down"></i></a></li>
        <li class="chart-li">
            <a href="#">My cart</a>
            <ul>
                <li>
                    <div class="header-chart-dropdown">

                        @if (orderDetails!= null)
                        {
                            foreach (var item in orderDetails)
                            {
                            <div class="header-chart-dropdown-list">
                                <div class="dropdown-chart-left floatleft">
                                    @foreach (var units in productUnits)
                                    {
                                        if (units.ProductId == @item.ProductId)
                                        {
                                            <a href="#"><img src="~/@units.ProductImages.FirstOrDefault().ImageLocation" width="60px" height="60px"alt="cart"></a>
                                        }
                                    }
                                </div>
                                <div class="dropdown-chart-right">
                                    <h2 class="shopItemTitle">
                                        <a href="#">@item.Product.Name</a>
                                    </h2>
                                    <h3>Qty: @item.Quantity</h3>
                                    <h4>৳ @item.Price</h4>
                                </div>
                            </div>
                            }
                        }
                        <div class="chart-checkout">
                            <p>subtotal<span>৳ @totalAmount</span></p>
                            <button type="button" onclick="window.location.href ='/Order/Cart'" class="btn btn-default">Chckout</button>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
        <li><a href="#">@countItem items</a></li>
    </ul>
</div>
</body>
</html>

购物车在布局页面上。我创建了一个按钮单击事件函数来获取数据。然后使另一个功能在购物车中添加物品这个ajax函数有可能吗？

Answer 1

这取决于整个API的结构。我可以看到您正在“ / Product / GetCartData”上调用POST。这将返回产品ID。如果可以根据客户中的信息，使用该产品ID在购物车中显示实际产品，则可以解决该问题。但是很难看到，因为您没有提供更多代码。

我想是，您应该为购物车中当前的产品提供一个API GET端点，然后在POST请求的响应功能中，您应该发出一个新的GET ajax请求，并在其中请求产品目前在购物车中。然后，您将避免页面刷新。

如何在购物车列表中添加商品而不重新加载页面

1 个答案: