使用带有 3 个连续可靠下拉列表的 Ajax [重复]

Posted

技术标签:

【中文标题】使用带有 3 个连续可靠下拉列表的 Ajax [重复]【英文标题】:using Ajax with 3 consecutive dependable drop down lists [duplicate] 【发布时间】:2013-01-11 17:20:40 【问题描述】:

祝大家平安,我是使用 Ajax 的新手,问题是,我有 3 个连接到数据库的下拉列表,第一个是“姓名”,第二个是“年龄”,第三个是一是“国”!因此,我已连接到数据库,并在第一个列表“名称”中从中检索数据,然后使用 Ajax,在选择第一个列表的任何选项并将它们放入名为“年龄”的第二个列表后,我已成功检索到匹配数据,问题是,当我使用与第二个名为“age”的列表完全相同的方式将匹配数据检索到名为“country”的第三个列表中时,它不起作用!所以请帮助我,因为我正在使用这个例子来学习 Ajax,然后应用到一个更大的实际项目中!这是代码:-首先,home.php页面:-

<?php
include "config.php";
?>
<html> 
<head> 
<script type="text/javascript">
function agematch() 
 if (window.XMLHttpRequest) 
  xmlhttp = new XMLHttpRequest();
 
 else 
 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
 

xmlhttp.onreadystatechange = function() 
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 

  document.getElementById('age').innerHTML = xmlhttp.responseText;
  

 
xmlhttp.open('GET', 'connection.inc.php?name='+document.ajax.name.value, true );
xmlhttp.send();



function countrymatch() 
 if (window.XMLHttpRequest) 
  xmlhttp = new XMLHttpRequest();
 
 else 
 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
 

xmlhttp.onreadystatechange = function() 
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 

  document.getElementById('country').innerHTML = xmlhttp.responseText;
  

 
xmlhttp.open('GET', 'country.inc.php?age='+document.ajax.age.value, true );
xmlhttp.send();



</script>
</head>
<body> 
<form id="ajax" name="ajax" > 
Choose your name : <select name="name" id="name" select="selected"  onchange="agematch();"> <option>  </option> 
 <?php

   $query = "SELECT DISTINCT name FROM info";
   $result = mysql_query($query);
   while($row = mysql_fetch_array($result))
   echo"<option  value ='".$row[0]."'> '".@$row[0]."'</option>";
                                   
 ?>
</select>
Age : <select id="age" name="age" onchange="countrymatch();">  </select>
country : <select id="country" name="country"> <option> </option> </select>

</form>
</body>
</html>

现在,第一次 Ajax 调用的页面:-

<?php
include "config.php";
echo " <option>  </option> " ;
if(isset( $_GET['name']) ) 
  @$name = $_GET['name'];
  

  $query = "SELECT age FROM info WHERE name = '".@$name."' "; 
  $result = mysql_query($query);
    while ($query_row = mysql_fetch_array($result)) 

      echo " <option  value ='".$query_row[0]."'> $query_row[0]</option> ";
      

 ?>

现在,第三个下拉菜单的第二个 Ajax 调用页面:-

<?php
include "config.php"; 

  if (isset( $_GET['age']) ) 
     @$age=$_GET['age'];
        

  $query = "SELECT country FROM info WHERE name='".@$name."' AND age='".@$age."'  ";
  $result= mysql_query($query);
  while  ($query_row = mysql_fetch_array($result)) 

   echo " <option value = '".$query_row[0]."'> $query_row[0] </option> ";

  

 ?>

如您所见,这里是代码,当然我是通过一个名为“config.php”的页面连接到数据库的,所以我希望您帮助我解决这个问题并将数据从数据库中检索到第三个下拉列表“国家”。提前致谢!

【问题讨论】:

我建议你开始使用像 jQuery 这样的库来处理 javascript,这会让你的生活更轻松。 您好,在 Chrome 控制台的网络选项卡中,您是否检查过完成的 AJAX 请求是否传递了预期的参数?另外,一个建议:与其编写自己的代码来管理 AJAX 请求,不如使用 jQuery 来处理错误并且它已经过跨浏览器测试。 谢谢大家,问题已回答 【参考方案1】:

您没有在第二次调用中传递name

替换

xmlhttp.open('GET', 'country.inc.php?age='+document.ajax.age.value, true );

xmlhttp.open('GET', 'country.inc.php?age='+document.ajax.age.value+'&amp;name='+document.ajax.name.value, true );

希望对您有所帮助。

【讨论】:

永远谢谢你 :D,我真的很感谢你的帮助 :)

以上是关于使用带有 3 个连续可靠下拉列表的 Ajax [重复]的主要内容,如果未能解决你的问题,请参考以下文章

带有 AJAX 和数据库的动态下拉列表

使用带有 AJAX 表单的后退按钮?

使用 ajax 和分页的带有 ASP 下拉列表控件的 Select2

Laravel Ajax 下拉示例

来自 PHP/MySQL 的 Ajax 加载生成带有变量传递的 Bootstrap 下拉列表

如何使用 ajax 提交带有 3 个提交按钮的表单而不重定向到 Laravel 中的表单操作 url?