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

Question

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

<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

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

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

这将获取您的页面 returns（因此请确保它是 HTML）并更新所有 div 节点 class="my-div -class" 含数据。

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

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

相反。

Answer 2

<!--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 指导我正确的方向。对于任何挣扎的人的另一个提示是，您可能需要将您想要的页面部分重新加载到单独的 class 分区中，然后为新的 class 分区设置边距为 0 和填充为 0 的样式. 原因是，如果在 Ajax 请求完成后不添加新的 class，它似乎会将 element/class 移动到我认为的原始位置。我不知道是否有更好的方法来做到这一点，但这对我有用。希望我的输入可以让您省去头痛。上下文：此代码用于在不重新加载整个页面的情况下从表单元素中获取输入数据。然后提交数据，需要重新加载的部分页面，在本例中是购物车小部件和我的添加到购物车图标，仅重新加载。

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

How do implement an Ajax partial page refresh within this block of code?

php

ajax

jquery

ajaxform