xml - XMLHttpRequest() 练习
问题描述
我正在调用一个 php 文件,该文件从文件中读取随机名称。我想动态地将名称添加到表中。如果名称已经存在,我想增加位于它旁边另一个单元格中的计数。我的代码中有一个错误,我找不到它。
这是我的代码
et button = document.querySelector("input");
let par = document.querySelector("p");
let table = document.querySelector("table");
let xhr;
let myArr=[14];
let tempStrin;
function upDateTable(name){
for(let i=0; i < myArr.length; i++){
if(myArr[name>=1]){
myArr[name]++;
document.querySelectorAll(`#${name}`).innerText = myArr[name];
}
else{
myArr[name]=1;
table.innerHTML+=`<tr><td>${name}</td><td id=${name}>${myArr[name]}</td></tr>`
}
}
}
function xhrCall () {
try {
xhr = new XMLHttpRequest();
xhr.addEventListener(`readystatechgange`, function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
tempStrin = xhr.responseText;
updateTable(tempStr);
}//if
}//if
});//on readystatechange
xhr.open('GET', "http://csdev.cegep-heritage.qc.ca/students/1175333/JBarbeau_C31L03_Files/php/random.php");
xhr.send();
}
catch(e){
console.error("Request did not work");
}
}
let testTime;
button.addEventListener('click' ()=>{
if (button.value==="Start"){
button.value==="Stop";
testTime= setInterval(xhrCall,3000);
}
else if(button.value==="Stop"){
button.value="Start";
clearInterval(testTime);
}
});
解决方案
我对此感到不舒服,document.querySelectorAll('#${name}')
我相信这是它不起作用的原因之一。querySelectorAll
将返回一个HTMLCollection
,因此innerText
对其进行设置没有意义。此外,您使用的是 ID,因此从技术上讲,它在您的页面上应该是唯一的。
另外,我认为您将从“字典”对象而不是经典数组中受益匪浅:
let dict = {};
function upDateTable(name){
//We check if our name exists
if (dict[name]) {
dict[name] += 1;
document.getElementById(`#${name}`).innerText = myArr[name];
} else {
dict[name] = 1;
//no reason to put our value in the string, we know it's always 1
table.innerHTML += `<tr><td>${name}</td><td id=${name}>1</td></tr>`;
}
}
推荐阅读
- mysql - mysql DISTINCT 两次显示相同的内容
- c# - 无法从 IhttpActionResult 中提取内容,出现错误
- r - 如何使用 R 包 plm 中的 pgmm 函数
- c# - 是否可以在 Windows 服务内运行的不可见表单上模拟鼠标单击?
- go - 为什么 PNG 的透明度不能正确显示?
- angular - 模块加载顺序
- jquery - 设置mindate时,Jquery Datepicker无法转到上个月
- sql-server - 如何在 SQL Server 中的多个实例和数据库上运行查询
- java - 如何从 Spring Boot 中的 Spring 缓存中的缓存中按键获取单个项目?
- javascript - 如何从 Promise 中获得结果?