jQuery / JavaScript解析AJAX響應

Question

我正在從包含各種元素的服務器（服務器處理了購物車的更新）中檢索AJAX響應。 這是一個看起來像的例子：

<div id="blockcart-wrapper">
<div class="shoppingcart-background" id="bg-div"></div>
    <div class="blockcart cart-preview" data-refresh-url="//localhost/backend/index.php?fc=module&amp;module=shoppingcart&amp;controller=ajax">
        <div class="header">
            <a rel="nofollow" href="#">
                <img class="cart-icon" src="someImage"
                     onclick="toggleClass()">
                            </a>
        </div>
        <div class="body" id="shopping-cart-body">
            <div class="close">
                <a href="#" onclick="toggleClass()">
                    <img class="icon" height="20px" width="20px" src="someImage">
                </a>
            </div>
            <h1 class="shopping-cart-header">Shoppingcart</h1>
            <div class="products-container">
                                    <div class="product">
                        <span class="product-image"><img src="someImage"></span>
                        <div class="product-details">
                            <h2 class="name-header">Name</h2>
                            <div class="product-quantity-details">
                                <span class="quantity">19</span>
                                                                    <a href="http://backend/increase" class="js-decrease-product-quantity" data-link-action="update-quantity">-</a>

                                                                    <a id="link1" href="https://backend/decrease" class="js-increase-product-quantity" data-link-action="update-quantity">+</a>

                                <span class="color-circle">
                                                                    </span>
                            </div>
                            <div class="price-open">
                                <span class="product-price">14,16 €</span>
                                <span class="product-link"><a href="http://localhost/backend/linkToProduct">öffnen</a></span>
                            </div>
                              <a
    class="remove-from-cart"
    data-link-action="remove-from-cart"
    data-id-product="6"
    data-id-product-attribute="0"
    href="http://backend/remove"
    rel="nofollow"
   >
    Remove
  </a>
                        </div>
                    </div>
                            </div>

            <div class="checkout">
                <div class="meta-data-wrap">
                                        <div class="cart-total label-row">
                        <span class="label">Total</span>
                        <span class="value">269,06 €</span>
                    </div>
                </div>

                                                                <a href="/index.php?controller=order" class="checkout-step">
                    <button type="button" class="dark">Checkout</button>
                </a>
            </div>
        </div>

問題是，重做包含大約25000 LOC，這幾乎是不相關的。 因此，我想解析響應的這一部分並將其插入到實際的HTML中。 到目前為止，我做了什么：

document.getElementById('link1').addEventListener('click', function(ev){
    ev.preventDefault();
    console.log(ev);

        $.ajax({
        url: this.href,
        type: "GET",
        dataType: "html",
          success: function(data) {
              console.log($(data).text()); 
          }
    });
});

這給了我完整的答復。 因此， blockcart-wrapper起，我嘗試找到id為blockcart-wrapper的div，這是替換舊HTML的“入口點”，因此我這樣做：

document.getElementById('link1').addEventListener('click', function(ev){
    ev.preventDefault();
    console.log(ev);

        $.ajax({
        url: this.href,
        type: "GET",
        dataType: "html",
          success: function(data) {
              console.log($(data).find('#blockcart-wrapper')); 
          }
    });
});

但這給了我一個jQuery對象，而不是這個div的HTML內容。
有人可以幫我解析提到的div然后用新解析的div替換“舊”的div嗎？

Answer 1

但這給了我一個jQuery對象，而不是這個div中的HTML內容。

您必須使用.html()返回div內部的HTML代碼，例如：

console.log( $(data).find('#blockcart-wrapper').html() );

Answer 2

如果無法獲得較小的響應，請嘗試獲取部分響應：

注意選擇器之前的空格

url: this.href + ' #blockcart-wrapper'

要么

$("#container").load(location.href + ' #blockcart-wrapper')