如何在这段代码中实现 Ajax 部分页面刷新？

Question

我正在尝试刷新页面的一部分。更具体地说，它是一个带有“类名”的划分标签。我试图让事情简单明了，以避免混淆。如何将部分页面刷新添加到当前代码块中的单个类？请注意，代码似乎完全符合我的要求。我只需要添加部分页面刷新来完成它，但我不知道该怎么做。

<script type="text/javascript">
$('form').on('submit', function() {
  var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};
  that.find('[name]').each(function(index, value) {
    //console.log(value);
    var that = $(this),
        name = that.attr('name'),
        value = that.val();

      data[name] = value;
  });

  //console.log(data);
  //now we are using ajax
  $.ajax({
    url: url,
    type: type,
    data: data,
    success: function() {
      //console.log(response);
      //I think I would put the code for a page refresh here???
    }
  });
  return false;
});
</script>

非常感谢您的时间和精力。

Answer 1

<!--Ajax request with form element-->
<script type="text/javascript">
$('form').on('submit', function() {
  var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};
  that.find('[name]').each(function(index, value) {
    //console.log(value);
    var that = $(this),
        name = that.attr('name'),
        value = that.val();

      data[name] = value;
  });

  //console.log(data);
  //now we are using ajax
  $.ajax({
    url: url,
    type: type,
    data: data,
    success: function(data) {
      $('#update-whole-cart').load(document.URL + ' #update-whole-cart');//make sure to include space before second id input
      $('.update-whole-cart-added-icon').load(document.URL + ' .update-whole-cart-added-icon');
    }
  });
  return false;
});
</script>

问题是我需要过滤掉数据以仅加载包含我需要加载的内容的部分页面。感谢@MikeB 引导我朝着正确的方向前进。对于任何挣扎的人的另一个提示是，您可能需要将您想要的页面部分重新加载到一个单独的类划分中，然后为新的类划分样式，其边距为 0，填充为 0。原因是，如果你一旦 Ajax 请求完成，不要添加新类，我认为它似乎将元素/类移动到其原始位置。我不知道是否有更好的方法来做到这一点，但这对我有用。希望我的意见可以让你头疼。上下文：此代码用于从表单元素中获取输入数据，而无需重新加载整个页面。然后提交数据并且需要重新加载页面的一部分，在这种情况下，购物车小部件和我的添加到购物车图标，只是重新加载。

Answer 2

由于您似乎在使用 jQuery，因此您需要在成功函数中添加一个参数，例如：

success: function(data) {
  $(".my-div-class").html(data); // update all divs with this class
 }

这将获取您的页面返回的任何内容（因此请确保它是 HTML）并使用数据更新所有 div 节点 class="my-div-class"。

如果您在父页面中使用过，您可以使用：

 $("#my-div-class").html(data);

改为。