使用 AJAX 添加项目后如何刷新页面内容

Question

我有一些 url 我将一些项目添加到另一个页面（购物车页面）但是通过刷新页面并且它工作正常，现在我尝试这样做使用 Ajax，所以我创建了一个 ajax 函数来调用它 URL 它工作并添加了我的项目。

现在的问题 是我必须重新加载其他页面（购物车页面）才能看到产品。那么如何在添加项目后刷新此页面，我的意思是在调用此 URL.

之后

Url : <?php echo Mage::helper('checkout/cart')->getAddUrl($_product, $params); ?>

cart.phtml

...
<div class="row">
    <div class="col-md-6">
        <div class="product-qty">
            <div class="custom-qty">
                <div class="btn-plus">
                    <button type="button" class="reduced items" onclick="minusQty('<?php echo $_product->getId() ?>')">
                        <i class="fa fa-minus"></i>
                    </button>
                    <input name="qty" id="qty-<?php echo $_product->getId()?>" maxlength="12" value="1" title="Qté" class="input-text qty" type="text">
                    <button type="button" class="increase items" onclick="plusQty('<?php echo $_product->getId() ?>')">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <?php $params = array('qty'=>2) // the input value ?>
    <div class="col-md-6">
        <button type="button" title="<?php echo $this->__('Add') ?>" class="button btn-cart pull-left-none" onclick="addToCartAjax('<?php echo Mage::helper('checkout/cart')->getAddUrl($_product, $params); ?>')" >
            <span><span><?php echo $this->__('Add') ?></span></span>
        </button>
    </div>
</div>

//JS PART
<script type="text/javascript">
    function addToCartAjax(addUrl) {
        jQuery.ajax ({
                url: addUrl,
                type : 'GET',
        })
    }
</script>

编辑：

cart.phtml

的内容

<div class="row">
    <div class="col-main col-lg-12">
        <div class="cart">
            <fieldset>
                ...
                <tbody>
                    <tr class="first odd"><td>Item1</td></tr>
                    <tr class="last even"><td>Item2</td></tr>
                </tbody>
                ...
            </fieldset>
        </div>
    </div>
</div>

编辑2：

动作控制器

public function addAction()
{

    if (!$this->_validateFormKey()) {
        $this->_goBack();
        return;
    }
    $cart   = $this->_getCart();
    $params = $this->getRequest()->getParams();
    try {
        if (isset($params['qty'])) {
            $filter = new Zend_Filter_LocalizedToNormalized(
                array('locale' => Mage::app()->getLocale()->getLocaleCode())
            );
            $params['qty'] = $filter->filter($params['qty']);
        }

        $product = $this->_initProduct();
        $related = $this->getRequest()->getParam('related_product');

        /**
         * Check product availability
         */
        if (!$product) {
            $this->_goBack();
            return;
        }

        $cart->addProduct($product, $params);
        if (!empty($related)) {
            $cart->addProductsByIds(explode(',', $related));
        }

        $cart->save();

        $this->_getSession()->setCartWasUpdated(true);

        /**
         * @todo remove wishlist observer processAddToCart
         */
        Mage::dispatchEvent('checkout_cart_add_product_complete',
            array('product' => $product, 'request' => $this->getRequest(), 'response' => $this->getResponse())
        );

        if (!$this->_getSession()->getNoCartRedirect(true)) {
            if (!$cart->getQuote()->getHasError()) {
                $message = $this->__('%s was added to your shopping cart.', Mage::helper('core')->escapeHtml($product->getName()));
                $this->_getSession()->addSuccess($message);
            }
            $this->_goBack();
        }
    } catch (Mage_Core_Exception $e) {
        if ($this->_getSession()->getUseNotice(true)) {
            $this->_getSession()->addNotice(Mage::helper('core')->escapeHtml($e->getMessage()));
        } else {
            $messages = array_unique(explode("\n", $e->getMessage()));
            foreach ($messages as $message) {
                $this->_getSession()->addError(Mage::helper('core')->escapeHtml($message));
            }
        }

        $url = $this->_getSession()->getRedirectUrl(true);
        if ($url) {
            $this->getResponse()->setRedirect($url);
        } else {
            $this->_redirectReferer(Mage::helper('checkout/cart')->getCartUrl());
        }
    } catch (Exception $e) {
        $this->_getSession()->addException($e, $this->__('Cannot add the item to shopping cart.'));
        Mage::logException($e);
        $this->_goBack();
    }
}

Answer 1

我假设当您将商品添加到购物车时，您会从服务器收到关于购物车当前商品的某种响应，否则您必须先在服务器端实现该响应

将此添加到您的函数中：

  function addToCartAjax(addUrl){
    $.ajax({
      url: addUrl,
      type: 'GET',

     })
     .done(function(response ) {
         //response - this is the response from the server
     });
 }

我不知道你的服务器到底是什么 returns 如果它是 html 而不是在 .done 闭包中这样做：
```
  .done(function(response ) {
       // response - this is the response from the server
       $('.YourCartContainer').html(response);
   });
```
因此，如果您的服务器 returns 包含您的购物车商品的 html 片段，您应该将其作为 html 插入到您的购物车 div 容器中，但是如果服务器 returns 对项目的 Json 响应比你必须使用 jquery 循环遍历它们并在此处适当格式化示例，但是我再次不知道你的服务器 returns所以只需应用该技术即可：
```
  .done(function(response ) {
       // response - this is the response from the server
       var htmlResult = '';
       $.each(response, function( item ) {
          htmlResult += '<p>'+ item.name + '</p><br>'
       });
      $('.YourCartContainer').html(htmlResult);
   });
```
所以我在这里遍历了 json 并创建了一些简单的 html，您可以在其中获取购物车内的所有商品名称，希望这对您有所帮助！如果您需要更多关于您的案例的具体信息，请 post 您的服务器响应是什么样的 !!

使用 AJAX 添加项目后如何刷新页面内容

How to refresh content of page after adding item with AJAX

javascript

ajax

zend-framework

ajaxform

zend-framework2