如何使用Vanilla JavaScript刷新HTML文档的特定部分

Question

我在AJAX购物车系统上工作，当数量变化时，子总数将自动更新。我的解决方案是每次输入更改，将其发布到当前页面（购物车页面），然后重新加载显示子总计的div。但是，我不知道如何用纯JavaScript做到这一点，我还没有找到任何参考。这是我对上述算法的函数：

var _rangeInput = document.querySelectorAll('.ranum'), _upAload = document.getElementsByClassName('upAload');
var _frmData = {};
for (var i = 0; i < _rangeInput.length; i ++) {
    _rangeInput[i].addEventListener('change', function(){
        _frmData[this.name] = this.value;
        ajaxFormValidate({
            type: 'POST',
            url: location.href,
            method: true,
            sendItem: _frmData,
            success: function(response) {
                //reload here
            }
        });
    }, false);
}

代码说明：

• 首先，获取需要处理的输入和div。
• 遍历所有输入并获取其值和名称。
• 我为自己编写了一个AJAX函数，你可以看一下。

无论如何使用纯JavaScript做到这一点？提前致谢。 编辑：我不能使用JavaScript方法或函数来更改内容，因为我将请求发送到同一页面，因此，response这里将具有整个文档的值。 此外，这是系统的工作方式：

• 首先，用户改变他们想要的数量
• AJAX将请求发送到同一页面
• 页面根据请求更改信息
• AJAX接收请求，并刷新/重新加载特定的div

Answer 1

只需使用响应数据设置子总div的innerHTML即可。

document.getElementById("sub-total").innerHTML = response.value; //Whatever value you get in response 

Answer 2

听起来你实际上是在询问如何从AJAX响应中获取单个元素。

您可以通过将响应解析为临时元素，然后在其中找到所需的元素来实现：

const holder = document.createElement('div');
holder.innerHTML = response;
const myElement = holder.querySelector('some selector');