使用 mySQL 数据、ajax、PHP post 更新 innerHTML 文本

Question

好的，所以我已经在这个问题上苦苦挣扎了一段时间，但我遇到了一个我无法弄清楚的墙。我有一个包含许多表单的页面，用户可以插入不同类型的输入，这些输入通过下面的 ajax 脚本提交到 mySQL 数据库（这部分都有效）。

现在，我需要某些字段来填充用户在其他输入字段中输入的信息。 HTML 中的这些字段采用以下形式：

<div class="popField" id="client_input_3_0_1_a"><?php echoInput('client_input_3_0_1_a') ?></div>
<div class="popField" id="client_input_3_0_2_a"><?php echoInput('client_input_3_0_2_a') ?></div>

（上面的 echoInput() 只是一个函数，当页面从 mySQL 数据库加载时，它将加载并填充此字段，该部分有效）。这里的 id 与用户输入的 id 及其在数据库中的位置相匹配。

不起作用的是当用户更改某些输入时，这应该用他们的更改重新填充其中一个字段。而不是这样做，它似乎只重新填充页面上要重新填充的最后一个 div，就好像数据以正确的顺序获取一样，但它只存储在页面上的最后一个 div 中，而不是每个相应的 div .对我哪里出错有任何想法吗？

    // Retrieve all forms of '.formAjax' on the page onChange
    $('.formAjax').change(function () {
        $.post('process.php', $(this).serialize(), function(data) {
            //process.php stores input to mySQL database
        });


        //retrieve divs that need to be populated with input
        var divstopop = document.getElementsByClassName("popField");
        for (var i = 0, n = divstopop.length; i < n; ++i){
            var dbID = divstopop[i].id;
            divstopop[i].innerHTML= divstopop[i].id; //this prints each respective ID correctly
            $.post("populateField.php", {dbID: dbID}, function(returned_data){
                //here populateField.php just retreives data from the database for the id dbID and echoes it back
                //divstopop[i].innerHTML = returned_data; //Does not work at all(?)
                document.getElementById(dbID).innerHTML = dbID + returned_data; 
                //Last div to populated is the only one that changes 
                //and it flashes through what each of the other ones should be populated with
            });
        }

    });
   });

抱歉，如果我没有说清楚，或者我在这里遗漏了一些非常明显的东西，我的大脑很累。

Answer 1

您使用同一个变量进行多次调用。 dbID 和 i 在被先前的调用使用时被更新。这就是为什么只更新最后一个字段的原因，因为i 和dbID 在最后一次迭代之前都被修改了。

您可以通过创建新范围来解决此问题

function populateDiv(div) {
    var dbID = div.id;
    div.innerHTML = div.id; //this prints each respective ID correctly
    $.post("populateField.php", {dbID: dbID}, function(returned_data){
        //here populateField.php just retrieves data from the database for the id dbID and echoes it back
        div.innerHTML = returned_data;
    });
}

$('.formAjax').change(function () {
    ...
    for (var i = 0, n = divstopop.length; i < n; ++i)
        populateDiv(divstopop[i]);
    ...
});

顺便说一句，这是非常低效的。您拨打n 电话以更新您的字段。您应该考虑进行一次调用以返回所有字段的数据，然后从中更新 div。这将减少网络流量以及服务器上的负载。