Form submission in ajax without refreshing whole page only refersh a particular div tag in ATG

Question

This is my Form

<dsp:form  id="add-to-cart" action="#?productId=${prodId}" method="post">
            <dsp:input bean="CartModifierFormHandler.addItemCount" value="1" type="hidden" />
            <dsp:input  bean="CartModifierFormHandler.items[0].quantity" value="1" type="hidden" id="quantityval"/>
            <dsp:input bean="CartModifierFormHandler.items[0].catalogRefId" value="${skuId}" type="hidden" />
            <dsp:input id="productIdd" bean="CartModifierFormHandler.items[0].productId" value="${prodId}" id="productIdd" type="hidden" />
            <dsp:input bean="CartModifierFormHandler.items[0].commerceItemType" value="default" type="hidden" />
            <dsp:input bean="CartModifierFormHandler.addItemToOrder" type="submit" value="Add To Cart" class="btn btn-primary btnpadding" id="cartSubmit"/>
</dsp:form>

this is my ajax Code

    $(document).ready(function() {
        $("#cartSubmit").on("click", function(e) {
            e.preventDefault();

            var formData = $('#add-to-cart').serialize();

            var dynSessConf = $(
                "[name=_dynSessConf]").val();

            formData += ' _dyncharset=UTF-8&_dynSessConf=' + dynSessConf + '&%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.addItemCount=1&_D%3A%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.addItemCount=+&%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.items%5B0%5D.quantity=1&_D%3A%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.items%5B0%5D.quantity=+&%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.items%5B0%5D.catalogRefId=sku70304&_D%3A%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.items%5B0%5D.catalogRefId=+&%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.items%5B0%5D.productId=prod70023&_D%3A%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.items%5B0%5D.productId=+&%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.items%5B0%5D.commerceItemType=default&_D%3A%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.items%5B0%5D.commerceItemType=+&%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.addItemToOrder=Add+To+Cart&_D%3A%2Fatg%2Fcommerce%2Forder%2Fpurchase%2FCartModifierFormHandler.addItemToOrder=+&_DARGS=%2Fvast%2FproductDescriptionPage.jsp',
                $.ajax({
                    type: 'get',
                    url: 'addToCart.jsp?_DARGS=/vast/productDescriptionPage.jsp',
                    data: formData,
                    success: function(data, status, xhr) {
                        $("#totalCommerceItemCountDiv").load("/vast/productDescriptionPage.jsp #totalCommerceItemCountDiv");
                    }
                });
        });
    });

but i will add anything in url ajax does not working (ex:productListingPage.jsp?productId="prod007") and normal ajax code is not working to add product in commerceItem List. ajax does not work without request form data append.

when I submit a form. The form data is added to a cart and without whole page reload.

Answer 1

尝试从表单标签中删除操作，或粘贴以下代码

    <dsp:form  id="add-to-cart">