ajax中的表单提交而不刷新整个页面只刷新ATG中的特定div标签

Posted 2023-02-21

【中文标题】ajax中的表单提交而不刷新整个页面只刷新ATG中的特定div标签

【英文标题】：Form submission in ajax without refreshing whole page only refersh a particular div tag in ATG

【发布时间】：2020-04-02 11:30:56

【问题描述】：

这是我的表格

<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>

这是我的 ajax 代码

    $(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");
                    
                );
        );
    );

但我会在 url 中添加任何内容 ajax 不起作用（例如：productListingPage.jsp?productId="prod007"） 并且普通的 ajax 代码无法在 commerceItem 列表中添加产品。如果没有附加请求表单数据，ajax 将无法工作。

当我提交表单时。表单数据被添加到购物车，无需重新加载整个页面。

【问题讨论】：

$("#totalCommerceItemCountDiv").load("/vast/productDescriptionPage.jsp #totalCommerceItemCountDiv");在执行您的 ajax 后，此代码再次执行对服务器的获取请求。我认为您应该改用 $("#totalCommerceItemCountDiv").html(data) 将响应呈现到 div 中。

【参考方案1】：

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

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