来宾用户无需登录即可在 Spring boot 中将产品添加到购物车

Question

我正在使用 spring boot、mysql 和 thymeleaf 开发电子商务 Web 应用程序。我能够使用 HttpSession 将产品添加到购物车，但问题是我必须先单击刷新按钮才能查看购物车中添加的产品。我正在使用 HttpSession，因为我希望来宾用户无需登录即可添加到购物车。单击按钮后，我想在不刷新页面的情况下查看添加到购物车的产品。 请我需要有人帮助我。

    @GetMapping("/customers/add/cart")
    @ResponseBody
    public ModelAndView addProductToCart(String productId, int quantity, HttpSession session) {

        ModelAndView modelAndView = new ModelAndView();
        try {
            Product product = productService.getProduct(productId);
            if (session.getAttribute("cart") == null) {
                List<CartItem> cartItems = new ArrayList<>();
                cartItems.add(new CartItem(product, quantity));
                session.setAttribute("cart", cartItems);
            } else {
                List<CartItem> cartItems = (List<CartItem>) session.getAttribute("cart");
                int index = this.exists(productId, cartItems);
                if (index == -1) {
                    cartItems.add(new CartItem(product, quantity));
                } else {
                    int qty = cartItems.get(index).getQuantity() + 1;
                    cartItems.get(index).setQuantity(qty);
                }
                session.setAttribute("cart", cartItems);
            }
            modelAndView.setViewName("redirect:/products/detail/" + productId);
            //modelAndView.setViewName("redirect:/index");
            return modelAndView;
        } catch (ProductNotFoundException e) {
            modelAndView.setViewName("error/404");
            return modelAndView;
        }
    }


     private int exists(String id, List<CartItem> cartItems) {
        for (int i = 0; i < cartItems.size(); i++) {
            if (cartItems.get(i).getProduct().getProductId().equalsIgnoreCase(id)) {
                return i;
            }
        }
        return -1;
    }

AJAX功能

function addToCart() {
        $.ajax({
            url: "/customers/add/cart",
            type: 'get',
            data: {
                quantity: function () {
                    return $("#productQty").val();
                },
                productId: function () {
                    return $("#productId").val();
                },
                _csrf: function () {
                    return $("input[name='_csrf']").val();
                }
            },
            error: function (jqXhr, status, errorMessage) {
                $("#message").after('<div class="alert alert-danger text-center">Error</div>')
            },
            success: function (data) {
                //alert(data);
               // $("#headerCartWrap").load("  #headerCartWrap")
                $("#message").after('<div class="alert alert-success text-center">Product added to cart successfully</div>')
            }
        });
    }

我可以使用 HttpSession 将产品添加到购物车，但问题是我必须先单击刷新按钮才能在购物车中查看添加的产品。