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');

如何使用Vanilla JavaScript

2 个答案: