循环ajax请求-> mysql->创建段落

Question

我已经尽可能多地阅读了，但完全卡在这里（它在一个阶段工作，但只有当我将警报放入 - ??）。我需要什么：

• 用户将列表输入到文本区域。
• 文本区域读取到数组。
• ajax 向 php 脚本请求数组中的每个元素。
• 然后php脚本运行mysql查询并将结果返回给ajax。
• 然后 ajax 创建一个新元素并用响应填充它。

希望用户在结果出现时会看到正在构建的列表（表非常大，因此预计某些数据比其他数据需要更长的时间）。

到目前为止的代码：

    <script type="text/javascript">
function ajaxFunction(value){
    var ajaxRequest;

    try{
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("Your browser broke!");
                return false;
            }
        }
    }

    ajaxRequest.onreadystatechange = function(){
        if (ajaxRequest.readyState == 4){
            return ajaxRequest.responseText;
        }
    }
    ajaxRequest.open("GET", "results.php?list=" + value, true);
    ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajaxRequest.send(null);
}

function loopAJAX() {
    var box = document.getElementById("results-table");
    box.innerHTML = "";

    var vars = document.getElementById('list').value;
    var varArray = vars.split("\n");
    var len = varArray.length;

    for(var i=0; i<len; i++) {
        var text = ajaxFunction(varArray[i]);
        var entry = document.createElement('p');
        entry.innerHTML = text; 
        box.appendChild(entry);
    }
}
</script>

输出应如下所示：

<div id='results-table'><p>id1</p><p>id2</p></div>

目前输出如下所示：

<div id='results-table'><p>undefined</p><p>undefined</p></div>

提前致谢！

Answer 1

您正在执行的 XMLHTTPRequest 是异步的，因此它们无法在函数定义时返回文本（稍后调用它们）。您需要做的是将

标记的引用传递给 onreadystatechange 方法，然后更新回调内的 innerHTML：

   <script type="text/javascript">
function ajaxFunction(value, p){
    var ajaxRequest;

    try{
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("Your browser broke!");
                return false;
            }
        }
    }

    ajaxRequest.onreadystatechange = function(){
        if (ajaxRequest.readyState == 4){
            p.className = "";
            p.innerHTML = ajaxRequest.responseText;
        }
    }
    ajaxRequest.open("GET", "results.php?list=" + value, true);
    ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajaxRequest.send(null);
}

function loopAJAX() {
    var box = document.getElementById("results-table");
    box.innerHTML = "";

    var vars = document.getElementById('list').value;
    var varArray = vars.split("\n");
    var len = varArray.length;

    for(var i=0; i<len; i++) {
        var entry = document.createElement('p');
        entry.className = "loading";
        entry.innerHTML = "Loading..."; 
        var text = ajaxFunction(varArray[i],entry);
        box.appendChild(entry);
    }
}
</script>

Answer 2

你的代码从根本上被破坏了。 AJAX 调用是异步的 - 您的 ajaxFunction() 立即返回，无需等待服务器响应。这意味着它会向代码的其余部分返回空值，然后将其插入到文档中，从而导致出现“未定义”段落。

要修复此代码，您必须让 onreadystatechange 处理程序调用一个插入返回数据的函数 - 这仅在服务器响应某些数据后才会发生。

除此之外，您的代码效率非常低。您正在对用户输入的每个项目进行 ajax 调用。您完全没有理由不能修改 PHP 脚本以接受多个值、一次处理所有值并在一次调用中返回所有结果。