Question

我有一个PHP文件，其中有一个表单，其中有两个Select下拉框。第一个选择框中填充了一些值。

Secont选择框为空。

根据要求，如果从第一个下拉框中选择了某个值，则第二个框应填充数据库中的某些值。

我想用AJAX来实现这个目标。

我从http://www.w3school.com网站获得了代码。但是在下面只有一个下拉框和onchange事件中，所选值的相关值以表格格式显示。我可以用我的第二个选择框替换代码中表格的html代码。但是根据要求，我想在选择之前显示第二个选择下拉框为空，这应该根据第一个选择框中的选择动态地从数据库中填充。所以朋友请告诉我如何解决这个问题。如果您因格式化而不理解以下代码;然后，我从http://www.w3school.com网站获得的相同代码位于同一网站上的以下链接中。

http://www.w3schools.com/php/php_ajax_database.asp

这是带有ajax代码的HTML页面

<html>
<head>
<script type="text/javascript">
function showUser(str)
{
 if (str=="")
 {
  document.getElementById("txtHint").innerHTML="";
  return;
 } 
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>

这是位于服务器上的PHP文件，使用AJAX调用并从数据库中获取值

<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
 }
 mysql_select_db("ajax_demo", $con);
 $sql="SELECT * FROM user WHERE id = '".$q."'";
 $result = mysql_query($sql);
 echo "<table border='1'>
 <tr>
 <th>Firstname</th>
 <th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

请指导我的朋友们。谢谢！

Answer 1

而不是以表格形式回显结果，或者像JCC格式一样将它们发回。您还应该通过强制转换（如果您的'q'变量是数字）或mysql_real_escape_string（）来对SQL注入进行某种检查。

PHP文件：

<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
  die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT `yourFieldName`, `yourFieldValue` FROM `yourTable` WHERE id = '".$q."'";
$result = mysql_query($sql);
$i = 0;
while ( $row = mysql_fetch_assoc($result) )
{
    $return[$i] = $row;
    $i++
}
$return["size"] = $i;
mysql_close($con);
echo json_encode($return);
?>

现在javascript文件中所有需要改变的是：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var responses = JSON.parse(xmlhttp.responseText);
        var size = responses.size;
        var selectBox =document.getElementById("yourSecondSelectBox");

        //clear any previous entries
        selectBox.options.length=0;
        for (var i = 0; i < size; i++){
            selectBox.options[i]=new Option(responses.i.yourFieldName, responses.i.yourFieldValue, false, false)
        }
    }
}

当然，您需要在html'head'标记中下载并包含JSON js文件。或者，你可以包含jquery并使用他们内置的AJAX和JSON支持，但这需要你做更多的研究。

如何在不使用PHP中的AJAX提交表单和页面刷新的情况下从数据库动态填充下拉框？

1 个答案: