使用ajax php mysql的动态相关下拉菜单_Php_Javascript_Ajax

使用ajax php mysql的动态相关下拉菜单

php javascript ajax

使用ajax php mysql的动态相关下拉菜单,php,javascript,ajax,Php,Javascript,Ajax,我试图使动态下拉框成为一种搜索工具，以帮助缩小mysql服务器显示数据的范围。我是一个不错的php程序员，但需要javascript和ajax方面的帮助该网站目前由3个页面组成：index_test.php、dropdown.php和dropdown2.php 在index_test.php上，有4个下拉菜单需要填充信息。第一个是在页面加载时使用php填充mysql表中的状态名。第二个框使用.change（）填充，该框引用php代码并显示mysql表中处于选定状态的学校。第三个框应该从第二个

我试图使动态下拉框成为一种搜索工具，以帮助缩小mysql服务器显示数据的范围。我是一个不错的php程序员，但需要javascript和ajax方面的帮助

该网站目前由3个页面组成：index_test.php、dropdown.php和dropdown2.php

在index_test.php上，有4个下拉菜单需要填充信息。第一个是在页面加载时使用php填充mysql表中的状态名。第二个框使用.change（）填充，该框引用php代码并显示mysql表中处于选定状态的学校。第三个框应该从第二个框中获取所选值，并向用户显示所选学校的班级名称，这一步就是代码被破坏的地方。php在通过提交表单进行测试时可以工作，但我希望能够在不刷新页面的情况下填充最后2个框。 mysql表的格式为：表学校：（学校id、学校、州）表班级：（班级id、学校id、班级abrv、班级编号）

谢谢你的帮助

index_test.php的代码：

<?php include_once("connect.php"); ?>
<html>
<head>
<title>ajax</title>
<script src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#state").change(function(){
var state = $("#state").val();
$.ajax({
type:"post", 
url:"dropdown.php", 
data:"state="+state, 
success: function(data) {
$("#school").html(data);
}
});
});

$("#school").change(function(){
var state = $("#school").val();
$.ajax({
type:"post", 
url:"dropdown2.php", 
data:"school="+school, 
success: function(data) {
$("#classname").html(data);
}
});
});

});

</script>


</head>
<body>

<h1>Get Notes:</h1>
<br/>
<form action="dropdown2.php" method="post">

State: <select id="state" name="state">
<option>--Select State--</option>
<?php   
$sql = "SELECT states FROM states";
$result = mysql_query($sql);

while ($output = mysql_fetch_array($result)) {
$state_name = $output['states'];
echo "<option value=\"$state_name\">$state_name</option>";
}       
?>
</select>
<br/>

School: <select id="school" name="school">
<option>--Select School--</option>
</select>
<br/>

Class Name: <select id="classname" name="classname">
<option>--Select Class Name--</option>
</select>
<br/>

Class Number: <select id="classnumber" name="classnumber">
<option>Select Class Name</option>
</select>
<br/>

<input type="submit" value="Search" />
</form> 


</body>
</html>


AJAX
$（文档）.ready（函数（）{
$（“#状态”）.change（函数（）{
var state=$（“#state”）.val（）；
$.ajax({
类型：“post”，
url:“dropdown.php”，
数据：“状态=”+状态，
成功：功能（数据）{
$（“#学校”）.html（数据）；
}
});
});
$（“#学校”）。更改（功能（）{
var state=$（“#学校”）.val（）；
$.ajax({
类型：“post”，
url:“dropdown2.php”，
数据：“学校=”+学校，
成功：功能（数据）{
$（“#类名”）.html（数据）；
}
});
});
});
获取注释：


声明：
--选择状态--


学校：
--选择学校--


类名：
--选择类名--


课程编号：
选择类名

Dropdown.php：

<?php
include_once("connect.php");

$state=$_POST["state"];
$result = mysql_query("select schools FROM schools where states='$state' ");
while($school = mysql_fetch_array($result)){
echo"<option value=".$school['schools'].">".$school['schools']."</option>";
}
?>

在第二个ajax函数中，您已将school下拉框值指定给state变量，但将变量school传递给ajax post。所以没有学校变量，这就是为什么会出现错误
$("#school").change(function(){
 var *state* = $("#school").val();
 //above variable should be school.
 $.ajax({
  type:"post", 
  url:"dropdown2.php", 
  data:"school="+*school*, 
  success: function(data) {
   $("#classname").html(data);
  }
 });
});

您非常容易受到SQL注入攻击，如果您还没有受到攻击，您将被黑客攻击。使用准备好的/参数化的查询可以完全避免此问题。@Brad您肯定是对的，感谢您添加此项。这要追溯到我试图弄清楚ajax是如何工作的那一天。查看您的旧代码有时很粗糙….:/。从那以后，我一直担任dba，所以现在这让我和你一样畏缩。谢谢
$("#school").change(function(){
 var *state* = $("#school").val();
 //above variable should be school.
 $.ajax({
  type:"post", 
  url:"dropdown2.php", 
  data:"school="+*school*, 
  success: function(data) {
   $("#classname").html(data);
  }
 });
});