<html>
<head>
<script src="js/jquery.min.js" ></script>
</head>
<body>
<form method="post" class="form-horizontal" >
<label class="col-lg-3 control-label">Category</label>
<select id="category" class="form-control" name="Category">
<option>Select Category</option>
<?php
$con=mysqli_connect("localhost","root","","keep_shopping");
$select="select * from tbl_category";
$result=mysqli_query($con,$select);
while($row=$result->fetch_assoc()){
$CategoryName=$row['CategoryName'];
$CategoryId=$row['CategoryId'];
?>
<option value="<?php echo $CategoryId;?>"><?php echo $CategoryName;?></option>
<?php
}
?>
</select>
<br />
<br />
<br />
<label class="col-lg-3 control-label">Brand</label>
<select id="brand" class="form-control" name="Brand">
<option>Select a Brand</option>
<script>
$(document).ready(function(){
alert('Change Happened');
$('#category').change(function(){
var CategoryId=$(this).val();
$.ajax({
'type':'get',
'url':'api.php',
'data':{'CategoryId':CategoryId,'btn':1},
'success':function(response){
document.getElementById("brand").innerHTML=response;
}
});
});
});
</script>
</select>
</form>
</body>
</html>
second page name is api.php
<?php
if(isset($_GET['btn'])){
$CategoryId=$_POST['CategoryId'];
$con=mysqli_connect("localhost","root","","keep_shopping");
$select=mysqli_query($con,"select * from tbl_brand where
CategoryID='$CategoryId'");
$states='<option>-SELECT CITY-</option>';
while($row=$select->fetch_assoc()){
$states.='<option
value="'.$row["BrandID"].'">'.$row["BrandName"].'</option>';
}
echo $states;
}
?>
答案 0 :(得分:0)
ajax函数正在使用GET
方法,但在api.php
脚本中,您尝试使用$_POST['CategoryId']
,所以也许您应该将其更改为$_GET['CategoryId']
<?php
if( isset( $_GET['btn'], $_GET['CategoryId'] ) ){
/* The ajax method is GET */
$CategoryId=$_GET['CategoryId'];
$con=mysqli_connect("localhost","root","","keep_shopping");
$select=mysqli_query($con,"select * from tbl_brand where CategoryID='$CategoryId'");
$states='<option>-SELECT CITY-</option>';
while($row=$select->fetch_assoc()){
$states.='<option value="'.$row["BrandID"].'">'.$row["BrandName"].'</option>';
}
echo $states;
}
?>
顺便说一句,api.php
代码容易受SQL injection攻击,因此您应该使用prepared statements
<script>
$(document).ready(function(){
/* The alert should be within the change callback function */
$('#category').change(function(){
var CategoryId=$(this).val();
alert( 'Change Happened: '+CategoryId );
$.ajax({
'type':'get',
'url':'api.php',
'data':{'CategoryId':CategoryId,'btn':1},
'success':function(response){
document.getElementById("brand").innerHTML=response;
}
});
});
});
</script>
要测试onchange
事件是否实际触发,请使用控制台(现在大多数浏览器都有控制台)并打开网络选项卡。
我只是使用上面的javascript设置了一个测试文档,它触发了警报并发送了数据 - 虽然我明显使用了不同的目标脚本。
答案 1 :(得分:0)
function get_state_names($country){
$sql_get_state_names = "select *
from ".main::$db_states."
where country_id = (select country_id
from ".main::$db_countries."
where number = '".$country."')" ;
$res_get_state_names = mysql_query ($sql_get_state_names) ;
if (mysql_num_rows ($res_get_state_names) > 0){
$i = 0 ;
while ($row_get_state_names = mysql_fetch_object ($res_get_state_names)){
$tmp = array(
'id'=>$row_get_state_names->id,
'name'=>$row_get_state_names->name
);
$this->get_states[$i++] = $tmp ;
}
foreach($this->get_states as $key=>$val){
echo "<option value='".$val['id']."'>".$val['name']."</option>" ;
}
}
else echo "<option value='0'>No State</option>" ;
}
<script>
$(document).ready(function(){
$("#country").on('change', function(){
var country = document.getElementById("country").value ;
var xmlhttp ;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","process.php?action=get_state_names&country="+country,true);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var result = xmlhttp.responseText ;
document.getElementById("state").innerHTML = result ;
}
}
});
});
</script>