jquery ajax调用冲突？

Question

在我的网站上，我正在使用 jquery ajax 调用动态加载带有“添加到购物车”按钮的购物产品。 对于购物车本身，我使用 jcart，jquery 插件。

当我将一个项目添加到购物车时，jcart 使用 ajax 和 POST 调用一个 php 文件。 一切正常，产品已正确添加到购物车，但每次我将商品添加到购物车时页面都会重新加载。 当我不使用 ajax 调用加载产品（例如直接在页面中加载它们）时，一切正常，因此某处肯定存在冲突。 有什么线索吗？

这是我的产品功能和 html。

...
<script>
      function loadProducts(str) {
             $.ajax({
                   type: 'GET',
                   async: true,
                   url: 'ajax/load.php',
                   data: {'max-id' : str},
                   cache: false,
                   success: function(response) {
                        $('#products').html(response).fadeIn('slow');
                   },
                 });
        }
</script>

<script>
     $(document).ready(function() {
        var n = '';
       loadProducts(n);
     });
</script>

<script src="jcart/js/jcart.js"></script>

</body>
</html>

可以在此处找到带有 ajax 调用的 jcart 插件：http ://conceptlogic.com/jcart/standalone-demo/jcart/js/jcart.js

以下是 jcart.js 中的函数。

            $.ajaxSetup({
            type: 'POST',
            url: path + '/relay.php',
            cache: false,
            success: function(response) {
                // Refresh the cart display after a successful Ajax request
                container.html(response);
                $('#jcart-buttons').remove();
            },
            error: function(x, e) {
                ...
            }
        });

...

    function add(form) {
        // Input values for use in Ajax post
        var itemQty = form.find('[name=' + config.item.qty + ']'),
            itemAdd = form.find('[name=' + config.item.add + ']');

        // Add the item and refresh cart display
        $.ajax({
            data: form.serialize() + '&' + config.item.add + '=' + itemAdd.val(),
            success: function(response) {

                // Momentarily display tooltip over the add-to-cart button
                if (itemQty.val() > 0 && tip.css('display') === 'none') {
                    tip.fadeIn('100').delay('400').fadeOut('100');
                }

                container.html(response);
                $('#jcart-buttons').remove();
            }
        });
    }

...

    // Add an item to the cart
            // is called from the submit-buttons within each product picture
    $('.jcart').submit(function(e) {
        add($(this));
        e.preventDefault();
    });

"loadProducts()" 函数将其放入每个项目的 #products 容器中：

<form method="post" action="" class="jcart">
    <fieldset>
        <input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
        <input type="hidden" name="my-item-id" value="SDK12345" />
        <input type="hidden" name="my-item-name" value="Product Name" />
        <input type="hidden" name="my-item-price" value="1.00" />
        <input type="hidden" name="my-item-qty" value="1" />
        <ul>
            <li><img src="product-image.jpg"/></li>
            <li>1.00 Dollar</li>
            </ul>
        <input type="submit" name="my-add-button" value="Add to cart" class="button" />
    </fieldset>
</form>

Answer 1

我猜您是在添加到购物车按钮上的绑定单击操作中调用 loadProducts() 函数。 如果您使用具有默认点击行为的元素。 你可能想用'return false;'来防止这种情况发生。 在绑定的点击功能的最后一行。

像这样：

$('a.addtocart').bind('click', function(){
  //logic here (ajax)
  return false;
});  

在您的成功功能之后，还有一个逗号可能会在 IE 中变得混乱：

success: function(response) {
  $('#products').html(response).fadeIn('slow');
},

去掉逗号

我认为您的 ajax 调用中存在错误，请尝试解决它...我看不到将产品添加到您的购物篮的 php 文件的逻辑。 但是如果你想发送你的表单数据（数量，itemid），序列化你的表单数据就足够了。 无需传递额外的 get 变量。

     function add(form) {
        $.ajax({
            data: form.serializeArray(),
            url: 'yourfile.php',
            success: function(response) {

                // logic
            }
        });
     }

Answer 2

好的，我找到了解决方案。

由于表单是通过 ajax 加载的，它们没有被 jcart.js 正确解释（尽管这些函数本身都运行良好）。

“绑定”不起作用，但“实时”修复了它：

$('.jcart').live('submit',function(e) {
  add($(this));
  e.preventDefault();
});