我的 Ajax 有问题。目前，我有 5 对元素:下拉菜单(span 标签)和下拉菜单的内容(ul 标签)。关于span tags 是一个事件监听器，用于 onclick ，如果点击了 drop-downs出现，当在别处点击时，下拉菜单消失。使用硬编码 li的下拉菜单工作正常。但是，我正在尝试填充 <ul>带有动态生成的 <li>使用ajax。但是，Ajax 行为不端。

关于span我还有另一个事件监听器 onchange调用js函数calloptions(); ，这是我的 Ajax。我想要实现的是，如果您选择一个选项，其他下拉菜单中的选项会根据您的选择而变化。我的功能是onchange ，从下拉列表 0 循环到下拉列表 5，更改 <li>的基于所有选择的值。

然而，当我调试时，我的值 [k]更改为 5到时候readyState到达 [4]在第一个循环中？我不确定 [k] 的值是否增加了在循环 1 上是 onreadystatechange 的结果或完全是我所缺少的其他东西。因此，这导致函数无法覆盖 <ul>。值，因为它正在寻找 span[5]虽然只有 5 个，然后打印 Cannot read property 'parentElement' of undefined (...)

HTML

    <div id="filters">
        <div class="i_drop col column-2">
            <span class="i_drop_select"></span>
            <img class="i_drop_select_function drop" src="./assets/drop_input.png">
            <ul class="i_drop_content"></ul>
        </div>
        <div class="i_drop col column-2">
            <span class="i_drop_select"></span>
            <img class="i_drop_select_function drop" src="./assets/drop_input.png">
            <ul class="i_drop_content"></ul>
        </div>
        <div class="i_drop col column-2">
            <span class="i_drop_select"></span>
            <img class="i_drop_select_function drop" src="./assets/drop_input.png">
            <ul class="i_drop_content"></ul>
        </div>
        <div class="i_drop col column-2">
            <span class="i_drop_select"></span>
            <img class="i_drop_select_function drop" src="./assets/drop_input.png">
            <ul class="i_drop_content"></ul>
        </div>
        <div class="i_drop col column-2">
            <span class="i_drop_select"></span>
            <img class="i_drop_select_function drop" src="./assets/drop_input.png">
            <ul class="i_drop_content"></ul>
        </div>
    </div>

Ajax

function calloptions() { 
var toselect = ["class", "topic", "subtopic", "year", "marks"];
for (var k = 0; k < toselect.length; k++) {

    var filters = document.getElementById("filters"); 
    var span = filters.getElementsByTagName("span");
    var execute = "select";
    var myclass= span[0].innerHTML;
    var topic =span[1].innerHTML;
    var subtopic = span[2].innerHTML;
    var year = span[3].innerHTML;
    var marks =span[4].innerHTML;

    makeRequest('test.php', toselect[k],  myclass, topic, subtopic, year, marks, execute); 

    function makeRequest(url, select, myclass, topic, subtopic, year, marks, execute) {

    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
    }

    httpRequest.open('POST', url);
    httpRequest.onreadystatechange = alertContents;
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    httpRequest.send("function="+ execute+ "&toselect="+ select+ "&class=" + encodeURIComponent(myclass) + "&topic=" + encodeURIComponent(topic) + "&subtopic=" + encodeURIComponent(subtopic) + "&year=" + encodeURIComponent(year) + "&marks=" + encodeURIComponent(marks));
    }

    function alertContents() {
        if (this.readyState == 4 && this.status == 200) {
            var response = this.responseText;
            var container = span[k].parentElement || span[k].parentNode ;
            var ul =container.getElementsByTagName("ul")[0];
            ul.innerHTML = response;
        }
    }
}
}

PHP

if(!empty($_POST['function']) && !empty($_POST['toselect']))
{
    $toselect = $_POST['toselect'];
    $_POST['function']($toselect);

}

function select($toselect) {
    global $link;

    $variables = "";

    $select_options = array("class", "topic", "subtopic", "year", "marks");     

    $unset_options= array(); $set_options= array(); $set_values= array();

    for ($i=0; $i < count($select_options) ; $i++) { 
        if(isset($_POST[$select_options[$i]]) && $_POST[$select_options[$i]] != ''){
            array_push($set_options, $select_options[$i]);
        } else {
            array_push($unset_options, $select_options[$i]);
        }
    }

    for ($i=0; $i < count($set_options) ; $i++) { 
        array_push($set_values, $_POST{$set_options[$i]});
    }

    for ($i=0; $i < count($unset_options); $i++) { 
        $key = array_search ( $unset_options ,  $select_options);

        unset($select_options[$key]);
    }

    $select_options = array_values($select_options);

    for ($i=0; $i < count($set_options) ; $i++) { 
        if ($i<1) {
            $variables .= " $set_options[$i]='$set_values[$i]'";
        } else {
            $variables .= " AND $set_options[$i]='$set_values[$i]'";
        }
    }

    if ($variables != "") {
        $variables = "WHERE" . $variables;
    }

    $sql="SELECT DISTINCT $toselect FROM `questions` $variables";

    $result=mysqli_query($link, $sql);

    $test_array = array();

    $i = 0;

    while ($row =mysqli_fetch_array($result)) {
        $test_array[$i] = "<li>$row[0]</li>";
        $i++;
    }

    $test_array = implode("", $test_array);

    echo $test_array;       
}

我在 httpRequest.send() 打印了提交给 PHP 文件的参数并将它们作为 $_GET 运行在文件中，它可以工作，所以我知道这不是 PHP 的问题，而是我的 Ajax 失败。

我很感激任何更简单的算法/方法来实现预期目标，但更感激帮助消除我当前的错误。我是 Ajax 和 javascript 的新手，因此，我也非常感谢简化一下。谢谢!

最佳答案

目前，我还没有找出导致我“过度增加”[k] 值的原因，但通过实验，将 for 循环和 Ajax 分开工作。像这样:

function externalFunction() {

    var toselect = ["class", "topic", "subtopic", "year", "marks"];
    for (var i = 0; i < toselect.length; i++) {
        calloptions(i, toselect[i]);
    }
}


function calloptions(x, toselect) { 

    var form = document.getElementById("filters"); 
    var span = form.getElementsByTagName("span");
    var execute = "select";
    var myclass= span[0].innerHTML;
    var topic =span[1].innerHTML;
    var subtopic = span[2].innerHTML;
    var year = span[3].innerHTML;
    var marks =span[4].innerHTML;

    makeRequest('test.php', toselect,  myclass, topic, subtopic, year, marks, execute); 

    function makeRequest(url, toselect, myclass, topic, subtopic, year, marks, execute) {

        httpRequest = new XMLHttpRequest();

        if (!httpRequest) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }

        httpRequest.onreadystatechange = alertContents;
        httpRequest.open('POST', url);
        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
        httpRequest.send("function="+ execute+ "&toselect="+ toselect+ "&class=" + encodeURIComponent(myclass) + "&topic=" + encodeURIComponent(topic) + "&subtopic=" + encodeURIComponent(subtopic) + "&year=" + encodeURIComponent(year) + "&marks=" + encodeURIComponent(marks));
}

    function alertContents() {
        if (this.readyState == 4 && this.status == 200) {
            var response = this.responseText;
            var container = span[x].parentElement || span[x].parentNode ;
            var ul =container.getElementsByTagName("ul")[0];
            ul.innerHTML = response;
    }
}

搜索还没有结束，还在想办法......

关于javascript - 如何防止整数onreadystatechange的改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41201273/