for 循环中的 XHR 请求仅触发一次答案

【问题标题】：XHR request in for loop fires only oncefor 循环中的 XHR 请求仅触发一次
【发布时间】：2021-05-31 16:46:59
【问题描述】：

我正在为这个水疗业务创建一个网站。它有四个水平部分，每个部分有几个按钮，每个按钮都应该在 div "#container_xhr_info" 中显示自己的“处理信息”。

为了避免填充 HTML，我将所有处理 div 放在自己的 html 文件中的文件夹中，因此当单击按钮时，XHR 请求应该获取按钮的文件并将其显示在容器中。

我已经为带有 for 循环的按钮添加了一个 Click 事件，该事件会触发 xhr。我还将文件 URL 保存在一个数组中，以将它们放在 open() 中，也带有一个 for 循环。到目前为止，代码有效，但它在每个按钮（“剥离”按钮）上显示数组中的第 4 个 URL。我还没有找到解决这个具体案例的方法。

let array_asyncs_facial_location = ["Asyncs/facial/radio.html",
                                    'Asyncs/facial/diamante.html',
                                    'Asyncs/facial/limpieza.html',
                                    'Asyncs/facial/peeling.html',
                                    'Asyncs/facial/acne.html',
                                    'Asyncs/facial/rosacea.html',
                                    'Asyncs/facial/pustulas.html'];

let tratamientos_facial = document.getElementsByClassName('tratamientos_facial');

for(var i = 0; i < tratamientos_facial.length; i++){

    tratamientos_facial[i].addEventListener('click', ()=>{

        let xhr = new XMLHttpRequest;

        let url = array_asyncs_facial_location[i];
        xhr.open('GET', url );
        
        xhr.addEventListener('load', ()=>{
            if (xhr.status == 200){
                let plantilla = xhr.response;
                let container_xhr_info = document.querySelector('#container_xhr_info');
                container_xhr_info.innerHTML = plantilla;
            }
        })

        xhr.send();
    })
}

【问题讨论】：

您为每个请求覆盖innerHTML。试试container_xhr_info.innerHTML += plantilla;，这样你就可以添加了
我会改用 PHP。它基本上是为了从较小的部分组成一个大的 HTML 文档而发明的。这也会提高 SEO，因为搜索引擎在抓取网站时通常不会运行 JS 代码。

标签： javascript arrays for-loop onclick

【解决方案1】：

直到 click 函数触发后才会解析您用来获取 URL 的变量 i，此时它的值与您设置侦听器时的值不同。有更好的方法。通过监听器中的event 参数并使用element.setAttribute() 动态设置url，然后获取element.dataset 中的值。设置像data-url 这样的属性可以让我们简单地用element.dataset.url 得到它

let array_asyncs_facial_location = ["Asyncs/facial/radio.html",
  'Asyncs/facial/diamante.html',
  'Asyncs/facial/limpieza.html',
  'Asyncs/facial/peeling.html',
  'Asyncs/facial/acne.html',
  'Asyncs/facial/rosacea.html',
  'Asyncs/facial/pustulas.html'
];

let tratamientos_facial = document.getElementsByClassName('tratamientos_facial');

for (var i = 0; i < tratamientos_facial.length; i++) {
  // set the URL as an attribute of the element itself so we can get it later
  tratamientos_facial[i].setAttribute('data-url', array_asyncs_facial_location[i]);
  tratamientos_facial[i].addEventListener('click', (event) => {
    // make sure to pass the event argument through
    let xhr = new XMLHttpRequest;
    // now we just query the dataset property 
    let url = event.target.dataset('url');
    xhr.open('GET', url);

    xhr.addEventListener('load', () => {
      if (xhr.status == 200) {
        let plantilla = xhr.response;
        let container_xhr_info = document.querySelector('#container_xhr_info');
        container_xhr_info.innerHTML = plantilla;
      }
    })

    xhr.send();
  })
}

【讨论】：