动态 DIV 不会从 AJAX 成功刷新答案

【问题标题】：Dynamic DIV does not refresh from AJAX success动态 DIV 不会从 AJAX 成功刷新
【发布时间】：2019-08-05 09:24:23
【问题描述】：

我有一个 javascript 函数，它为 JSON 调用服务器并以 HTML 格式显示返回的数据。然后我通过 AJAX 删除一个数据项，然后尝试成功刷新 DIV，但这不起作用。我也理解其他人也遇到了同样的问题，但我使用的是其他人用来解决但无济于事的代码。有人可以帮忙吗，因为这看起来很琐碎，但我就是无法让它工作，非常感谢您对这个错误的建议！

JAVASCRIPT -

function getCartData(data){
// console.log(data);
//console.log(JSON.stringify(data.token));
//loop through JSON returned items array
for (var i = 0; i < data.items.length; i++) {
     var id = data.items[i].id;
     var title = data.items[i].title;
     var price = data.items[i].price;
     var quantity = data.items[i].quantity;
     var image = data.items[i].image;
     var error = 'error_'+ data.items[i].id;
     var remove = 'remove_'+ data.items[i].id;
//bind JSON object to HTML
     $("#result").append("<div class='column left'><img src="+ image + "width=100 height=100 style=padding:20px></div><div class='column middle' >" + " " + title + " " + price + "</div><div class='column right' ><input id='" + id + "' type=number min=1 max=10 step=1 value=" + quantity + " maxlength=2 size=2 />&nbsp;<br><a id='" + remove + "' class='remove' >Remove</a><div id='" + error + "' class='error'></div></div>");
//load subtotal when page loads
     $('#subtotal').html(data.items_subtotal_price);
}}
//invoke server >> bind to DOM
     var script = document.createElement('script');
     script.src = 'https://example.com/cart.json?callback=getCartData'
     document.getElementsByTagName('head')[0].appendChild(script);

HTML -

<div id="cart-container">
<div id="result"></div>
</div>

AJAX -

$( ".remove" ).click(function() {
var self = this;
var remove_id = $(self).attr('id').replace('remove_', '');
      $.ajax({
      url: "https://example.com/cart/change.json",
      dataType: "jsonp",
      data: {
      id: remove_id,
      quantity : 0
  },
      success: function(data) {
      console.log(data); //formatted JSON data
      alert('Item removed');
      //TO DO - RELOAD DIV WITHOUT LOADING PAGE
           //  location.reload();
             $('#cart-container').load(document.URL +  ' #cart-container');
  }
});
});

【问题讨论】：

您似乎只是重新加载了购物车容器，但如果您还没有更新它，那么它会是一样的吗？

标签： javascript html ajax

【解决方案1】：

您可以在成功中调用购物车构建器功能：

 success: function(data) {
  console.log(data); //formatted JSON data
  alert('Item removed');
  getCartData(data);
}

【讨论】：

嗨 Andrea，我试过了，但它不起作用，被删除的项目仍然在页面上，直到我刷新整个页面然后它消失了。
我注意到了，你应该清空$("#result")元素
我试过了，但它删除了所有的 HTML，整个页面需要刷新才能再次显示数据。我下面的解决方案很冗长，但它奏效了。

【解决方案2】：

终于找到了一个可行的解决方案，我添加了另一个围绕数据行的 div -

var row = 'row_'+ data.items[i].id; //declare variable then assign to new div row
<div id='" + row + "'>Content HTML...</div>

jQuery .remove() 在 AJAX 中成功 -

 $('#row_'+ remove_id).remove(); //remove the row

再次感谢所有回复！

【讨论】：