PHP + AJAX 代码 - 显示从列表中选择值的数据

标签 php ajax

我正在尝试根据所选的选项字段显示数据库(MySQL)中的数据。我有两个字段,如下所示:

选择健康 block :......(列表)
选择年份:......(列表)

当我选择健康 block 和年份时,数据库中的数据应该显示在同一页面上。我尝试过以下代码。实际上,如果我只有一个选项(“年份”)可供选择,则代码可以工作。我需要的是将两个值(健康 block 和年份)传递到页面(getblock2.php),我在其中编写了从数据库检索数据的代码。谁能帮我找出问题出在哪里吗?

主页

<html>
<head>
<script type="text/javascript">
var str11;
var str22;

function showB(str2)
{
    str22=str2;
}

function showBlock2(str)
{
showB();
str11=str;
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getblock2.php?q="+str11+"&h="+str22,true);
xmlhttp.send();
}
</script>
</head>
<body>
Select a Health block
<select name="h" onChange="showB(this.value)">
<option value="1">H1</option>
<option value="2">H2</option>
</select>
<br/>
Select a year
<select name="yr" onChange="showBlock2(this.value)">
<option>2012</option>
<option>2013</option>
</select>
<div id="txtHint" style="width:570px; height:auto" >
                            </div>
</body>
</html>

getblock2.php

<?php
include("connect.php");
$q=$_GET["q"];
$h=$_GET['h'];
$q="select Total_Cases from epidemics where Year1=$q and Hid=$h";
$r=mysql_query($q);
$i=0;
while($row=mysql_fetch_row($r))
    {
    $i++;
    echo $i." ".$row[0]."<br/>";
    }
?>

最佳答案

当您在更改年份时调用 showBlock2() 时,未分配变量 str22。所以更换线路

showB();

showB(document.getElementsByName("h")[0].value);

当您选择健康状况然后选择年份时,这将起作用,无需在更改健康状况列表时调用 showB()。

编辑(优化代码):

以下代码已根据您的源代码进行了更改。

主页

<html>
<head>
<script type="text/javascript">
function showBlock2()
{
    var str11=document.getElementsByName("h")[0].value;
    var str22=document.getElementsByName("yr")[0].value;
    document.getElementById("txtHint").innerHTML="";
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
    xmlhttp.open("GET","getblock2.php?q="+str11+"&h="+str22,true);
    xmlhttp.send();
}
</script>
</head>
<body>
Select a Health block
<select name="h" onChange="showBlock2()">
    <option value="1">H1</option>
    <option value="2">H2</option>
</select>
<br/>
Select a year
<select name="yr" onChange="showBlock2()">
    <option>2012</option>
    <option>2013</option>
</select>
<div id="txtHint" style="width:570px; height:auto" >
</div>
</body>
</html>

请注意,只有 function showBlock2() 用于两个下拉菜单的 onchange,因此 div txtHint 会在每次更改时更新。也没有传递任何参数。

关于PHP + AJAX 代码 - 显示从列表中选择值的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18310784/

相关文章:

php - 通过按 Enter 键提交表单后 Laravel 错误

php - 根据用户 ID 和密码条件选择数据库

PHP - 将两组数字(小时和分钟)转换为时间

javascript - 重置表单元素而不重新加载页面

javascript - Codeigniter:使用 jQuery ajax 提交表单数据而不刷新页面

javascript - 尝试从 json 获取字符串值时出现错误

php - 如何在 Symfony2 DomCrawler 中保留子节点标签

PHP 将 csv 列读入数组

javascript - 从ajax响应增加文本框宽度值不起作用

python - 无法在 Django 中使用 AJAX POST