如何防止整数onreadystatechange的变化 [英] How to prevent the changing of integer onreadystatechange
问题描述
我的Ajax有问题。目前，我有5对元素：下拉列表（ span 标签）和下拉列表的内容（ ul 标签）。在 span上标签是一个事件侦听器，对于 onclick ，如果点击下拉式出现，当在别处点击时，下拉式消失。使用硬编码 li 的下拉菜单可以正常工作。然而，我试图使用ajax动态生成< li> s来填充< ul> 但是，阿贾克斯是行为不端。
在 span 上，我还有另一个 onchange的事件侦听器，它调用js函数 calloptions（）; ，这是我的Ajax。我试图实现的是，如果您选择一个选项，则其他下拉菜单中的选项将根据您选择的内容进行更改。我有这个功能的是 onchange ，从下拉菜单0到下拉菜单循环5改变< li> 的s基于所有选择的值是什么。
当我调试时，我的值 [k] 变为 5 在时间 readyState 中取得 [4] 在第一个循环中？我不确定循环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 dropsrc =./ 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 dropsrc =./ 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 dropsrc =./ 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 dropsrc =./ 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 dropsrc =./ assets / drop_input.png>
< ul class =i_drop_content>< / ul>
< / div>
< / div>
AJAX
function calloptions（）{
var toselect = [class，topic，subtopic，year，marks]; （var k = 0; 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）;
函数makeRequest（url，select，myclass，topic，subtopic，year，marks，execute）{
httpRequest = new XMLHttpRequest（）;
if（！httpRequest）{
alert（'放弃：无法创建XMLHTTP实例'）;
返回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）+& subpatic =+ 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
$ b $ pre $ 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（）;
$ b $ for（$ i = 0; $ i
array_push（$ set_options，$ select_options [$ i]）;
} else {
array_push（$ unset_options，$ select_options [$ i]）; $
$ b（$ i = 0; $ i
$ b $为$（$ i = 0; $ i< count（$ unset_options）; $ i ++）{
$ key = array_search（$ unset_options，$ select_options）;
unset（$ select_options [$ key]）;
}
$ select_options = array_values（$ select_options）; （$ i = 0; $ i
$ variables。=
$ set_options [$ I] = '$函数set_values [$ i]于';
} else {
$ variables。=AND $ set_options [$ i] ='$ set_values [$ i]';
}
}
if（$ variables！=）{
$ variables =WHERE。 $变量;
}
$ 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;
}
我将提交给PHP文件的参数打印在 httpRequest.send（）并将它们作为 $ _ GET 在文件中运行，并且它可以工作，所以我知道它不是一个问题PHP，但在我的Ajax上失败。
我希望得到更简单的算法/方法帮助达到预期的目标，但是，我目前的错误。我对Ajax和JavaScript都很陌生，因此也非常感谢一些沮丧。谢谢！
目前，我还没有发现是什么导致我的过度增长 [k] 值，但是从实验中分离出for循环和Ajax作品。像这样：
function externalFunction（）{
var toselect = [class，topic ，副标题，年，标记];
for（var i = 0; i
$ b函数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）;
函数makeRequest（url，toselect，myclass，topic，subtopic，year，marks，execute）{
httpRequest = new XMLHttpRequest（）;
if（！httpRequest）{
alert（'放弃：无法创建XMLHTTP实例'）;
返回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）+& subpatic =+ 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;
搜索仍然没有结束，但仍然尝试找出它......
I am having an issue with my Ajax. At the moment, I have 5 pairs of elements: the dropdowns (the span tags) and the contents of the dropdowns (the ul tags). On the span tags is an event-listener, for an onclick, where if clicked the drop-downs appear, and when clicked elsewhere, drop-downs disappear. With hardcoded li's the dropdowns work fine. However, I am trying to populate the <ul>s with dynamically generated <li>s using ajax. However, the Ajax is misbehaving.
On the span I also have another event-listener for onchange which calls the js function calloptions();, which is my Ajax. What I am trying to achieve is, if you select an option, the options in the other drop-downs change based on what you have selected. What i have the function do is onchange, loop from dropdown 0 to dropdown 5 changing the <li>'s based on what the values of the all the selects are.
When I debug, however, my value [k] changes to 5 by the time readyState gets to [4] in the first loop? I'm not sure whether the increase in the value of [k] on loop 1 is as a result of the onreadystatechange or something else entirely that I'm missing. This, therefore, results in the function being unable to overwrite the <ul>values because it is looking for span[5] while there are only 5 of them, which then prints 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;
}
I printed the parameters being submitted to the PHP file at httpRequest.send() and ran them as a $_GET in the file, and it works, so I know it not a problem with the PHP, but rather a failure on my Ajax.
I would appreciate assistance with any simpler algorithm/method to achieve the intended goal, but would appreciate even more, help with eliminating my current errors. I am new to both Ajax and javascript and would, therefore, also greatly appreciate a bit of dumbing down. Thanks!
解决方案 At the moment, I still haven't found out what causes my "over-increasing" [k] values, but from experimentation, separating the for loop and the Ajax works. Like so:
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;
}
}
The search still isn't over though, still trying to figure it out...
这篇关于如何防止整数onreadystatechange的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
