我花了一整天的时间试图找出问题所在,我在这里读到了很多类似的问题,但这似乎是一个特殊的问题。
我想要一个AJAX调用来填充一个基于先前从MySQL数据库中选择的下拉列表,但它不起作用,因为POST没有向我要发送它的PHP $id = $_POST['id']
文件发送任何数据。但是,如果我给它分配一个常数值(比如$id = 1
),它会很好地工作,并从数据库返回预期的数据。
这是AJAX代码:
<script type="text/javascript">
$(document).ready(function()
{
$("#state").change(function()
{
var menuId = $(this).val();
var request = $.ajax({
url: "schools.php",
type: "POST",
data: { id : menuId },
dataType: "html"
});
request.done(function( msg ) {
$("#schools").html( msg );
});
});
});
</script>
和PHP代码:
<?php
include('../connection.php');
if(isset($_POST['id']) && $_POST['id'] != '')
{
$id = $_POST['id'];
$SQ = "SELECT c_name FROM courses WHERE fac_id = ?";
$q = $conn->prepare($SQ) or die("ERROR: " . implode(":", $conn->errorInfo()));
$q->bindParam(1, $id);
$q->execute();
$total = $q->fetchAll();
$i=1;
foreach ($total as $sch){
echo "<option class = 'option' value = '$i'>". $sch[0].</option>";
$i++;
}
}
?>
编辑:
这是HTML代码:
<form class="form-horizontal">
<!-- Form Name -->
<!-- Select Basic -->
<div class="control-group">
<label class="control-label" for="selectbasic">State where your school is located</label>
<div class="controls">
<select id="state" name="state" class="form-control input-xlarge">
<?php
$i=1;
$SQ = "SELECT * FROM states";
$schools = $conn->prepare($SQ);
$schools->execute();
$total = $schools->fetchAll();
foreach ($total as $sch){
echo "<option class = 'option' value = '$i'>". $sch[1]. "</option>";
$i++;
}
?>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label" for="selectbasic">School</label>
<div class="controls">
<select name="school" id = 'schools' class="form-control input-xlarge">
<?php
$i=1;
$SQ = "SELECT * FROM schools";
$schools = $conn->prepare($SQ);
$schools->execute();
$total = $schools->fetchAll();
foreach ($total as $sch){
echo "<option class = 'option' value = '$i'>". $sch[1]. "</option>";
$i++;
}
?>
</select>
</div>
</div>
</form>
我会尝试直接使用$.ajax,而不是将其设置为变量。
$.ajax({
url: "schools.php",
type: "POST",
data: { id : menuId },
dataType: "html",
success: function(data){
append data stuff here.
},
error: function(xhr, status, error){
console.log(error + " error from here");
}
});
使用error函数,如果返回任何错误,您可以打印出错误。它可能会帮助您调试问题。
在一些较旧版本的jQuery中,select从未一致地返回val()。你可以试着看看这是否有效:
var menuId = $("option:selected",this).val();
此外,情况可能并非如此,但有时我发现这是可行的。
data: { 'id' : menuId }, //note the quotes
试试简写版本,看看它是否有帮助。
$.post('schools.php',{ 'id' : menuId },function(d){
$("#schools").html( d );
});