AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

javascript – 如何防止整数onreadystatechange的更改

分类：Ajax作者：编程之家原文地址

我的Ajax有问题.目前,我有5对元素：下拉列表(span标签)和下拉列表的内容(ul标签).在span标签上是一个事件监听器,用于onclick,如果单击则显示下拉列表,当在其他位置单击时,下拉列表将消失.使用硬编码的li,下拉列表工作正常.但是,我尝试使用ajax动态生成< li>来填充< ul> s.但是,Ajax行为不端.

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

但是,当我调试时,在第一个循环中readyState到达[4]时,我的值[k]变为5？我不确定循环1上[k]值的增加是由于onreadystatechange还是其他我完全不知道的东西.因此,这导致函数无法覆盖< ul>值,因为它正在查找span [5],而只有5个,然后打印无法读取未定义的属性’parentElement'(… )

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;
    }
}

搜索仍然没有结束,仍然试图弄清楚…

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native