0

我已经阅读了尽可能多的内容，但完全被困在这里（它在一个阶段工作，但只有当我放入警报时 - ??）。我需要的：

  • 用户将列表输入到文本区域。
  • 文本区域读取到数组。
  • 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>

提前致谢！

4

2 回答 2

0

您正在执行的XMLHTTPRequests 是异步的，因此它们无法在函数定义时返回文本（稍后会调用它们）。您需要做的是将<p>标签的引用传递给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>
于 2011-10-27T15:11:27.977 回答
0

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

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

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

于 2011-10-27T15:13:47.123 回答