相同的数据将两次添加到 JavaScript table 而不是将两个不同的东西添加到 table

Question

我有一个从 API 中提取结果并在 table 上显示结果的程序。应该发生的是每一行应该是不同的数据。然而，当它运行时，它添加了两次 ID 为 4 的数据，完全跳过了 ID 为 3 的数据。起初，我认为我一定是搞砸了 GET 请求。我去查了一下，原来是在获取数据，但是没有添加到table中。我移动了所有代码以添加到 for 循环内的 table，但同样的问题发生了。如果有用的话，我正在使用 Tomcat 来处理 API.

附件是我用来向 table 添加行的函数。

function addRow(tableName, rowData) {
                for (var h = 0; h < rowData.length; h++) {
                    var ajaxRequest = new XMLHttpRequest();
                    ajaxRequest.onreadystatechange = function(){
                        if(ajaxRequest.readyState == 4){
                            if(ajaxRequest.status == 200){
                                let table = document.getElementById(tableName);
                                let row = table.insertRow(1);
                                var order = JSON.parse(ajaxRequest.responseText);
                                var cell0 = row.insertCell(0);
                                var cell1 = row.insertCell(1);
                                var cell2 = row.insertCell(2);
                                var cell3 = row.insertCell(3);
                                var cell4 = row.insertCell(4);
                                var cell5 = row.insertCell(5);
                                var cell6 = row.insertCell(6);
                                var cell7 = row.insertCell(7);
                                var cell8 = row.insertCell(8);
                                var cell9 = row.insertCell(9);
                                var cell10 = row.insertCell(10);
                                
                                cell0.innerHTML = order.id;
                                cell1.innerHTML = order.name;
                                cell2.innerHTML = order.time;
                                cell3.innerHTML = order.type;
                                cell4.innerHTML = order.creamerAmount + " " + order.creamerType;
                                cell5.innerHTML = order.sugarAmount;
                                cell6.innerHTML = order.coffeeType;
                                cell7.innerHTML = order.teaType;
                                cell8.innerHTML = order.hotChocolateType;
                                cell9.innerHTML = order.smoothieType;
                                cell10.innerHTML = order.protein;
                            } else {
                                //I'm aware this is bad, not sure how to handle it otherwise though...
                                h--;
                            }
                        }           
                    }
                    ajaxRequest.open('GET', 'http://localhost:13760/cafe/cafe/orders/' + rowData[h]);
                    ajaxRequest.send();
                }
                
            }   ```

Answer 1

看来 Andreas 是对的。
尝试 const ajaxRequest = ... 而不是 var ajaxRequest = ....

我很难详细解释这里发生的事情。我的猜测如下：
如上所述，您使用相同的 ajaxRequest，就好像它会在 for 循环之前声明一样。
其次，由于请求是异步的，它会在主线程代码完成后从事件循环中发送。这意味着它将请求发送到 id = 4 两次。

我仍然可能在细节上有误（如果我错了请纠正我），但是将 var 更改为 const 应该会有所帮助。你试过了吗？

相同的数据将两次添加到 JavaScript table 而不是将两个不同的东西添加到 table

Same data adds twice to JavaScript table instead of adding two different things to the table

html

javascript

ajax

html-table