php - 使用 mySQL 数据、ajax、PHP post 更新 insideHTML 文本

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。这将减少网络流量以及服务器上的负载。