I am retrieving an AJAX response from a server (the server processed an update of a shoppingcart) that contains various elements. Here is an example of how it looks like:
<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&module=shoppingcart&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>
The problem is, that the respone contains about 25000 LOC which are mostly irrelevant. So I want to parse this part of the response and insert it into the actual HTML. What I did so far:
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());
}
});
});
This gives me the complete response. So from this on, I tried to find the div with the id blockcart-wrapper
, which is my 'entry point' for replacing the old HTML, so I did:
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'));
}
});
});
But this gives me a jQuery object and not The HTML content within this div
.
Could someone help me to parse the mentioned div
and replace the 'old' with the new parsed?
答案 0 :(得分:0)
But this gives me a jQuery object and not the HTML content within this div.
You must use .html()
to return the HTML code inside the div like :
console.log( $(data).find('#blockcart-wrapper').html() );
答案 1 :(得分:0)
如果无法获得较小的响应,请尝试获取部分响应:
注意选择器之前的空格
url: this.href + ' #blockcart-wrapper'
或
$("#container").load(location.href + ' #blockcart-wrapper')