如何在这个代码块内实现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

由于您使用的是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);

。

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给我指明了正确的方向。另一个提示是，您可能需要将页面的所需部分重新加载到单独的类划分中，然后为新的类划分样式设置0的边距和0的填充。原因是，如果在Ajax请求完成后不添加新类，我认为它似乎将元素/类移动到其原始位置。我不知道是否有更好的方法来做这件事，但这对我来说是有效的。希望我的建议能帮你省事。上下文:这段代码用于从表单元素获取输入数据，而无需重新加载整个页面。然后提交数据，需要重新加载的部分页面，在本例中是购物车小部件和我的添加到购物车图标，只被重新加载。