我是Ajax和编程的新手,目前正在边学习边学习。
我的目标
我目前正在尝试创建一个链式下拉列表,第一个下拉列表从我的数据库中填充,第二个下拉列表根据用户在第一个下拉菜单中的选择填充。
我的代码(表单页)
<?PHP
session_start();
if(@$_SESSION['Auth']!=="Yes") {
echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login.";
exit();
}
?>
<?PHP
//Processing Code goes here
?>
<!DOCTYPE html>
<html>
<head>
<script>
function getcategory() {
var xmlhttp;
if(window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp= new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
alert("This is an alert 1");
document.getElementById("category").innerHTML=xmlhttp.responseText;
}
}
alert("This is an alert 2");
xmlhttp.open("GET","AddItemCat.php","true");
alert("This is an alert 3");
xmlhttp.send();
alert("This is an alert 4");
}
function getsubcategory(cat) {
var xmlhttp;
if(window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp= new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("subcat").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","AddItemSubCat.php?cat="+cat,"true");
xmlhttp.send();
}
</script>
</head>
<body>
<form action="<?PHP echo $_SERVER['PHP_SELF'] ?>" name="additem" enctype="multipart/form-data" method="POST">
<table>
<tr>
<td>Select Category: </td>
<td><script>alert("This is an alert 5");</script>
<select id="category" onclick="getcategory()">
<script>alert("This is an alert 6");</script>
<option id="cat"value=""></option>
<script>alert("This is an alert 7");</script>
</select>
</td>
</tr>
<tr>
<td>Select SubCategory</td>
<td>
<select id="subcat" onclick="getsubcategory(cat)">
<option value=""></option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
我的代码(AddItemCat.php)
<?PHP
session_start();
if(@$_SESSION['Auth']!=="Yes") {
echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login.";
exit();
}
?>
<?PHP
if(@$_SESSION['Auth']=="Yes" && @$_SESSION['Type']=="Admin") {
include("cxn.inc");
$userid=$_SESSION['UserId']
$branchid=0;
$getcat="SELECT * FROM `Categories` WHERE `Business`=$userid AND Branch=$branchid";
$runcat=mysqli_query($cxn,$getcat) or die (mysqli_error($cxn));
while($row=mysqli_fetch_assoc($runcat)) {
$cat=$row['Category'];
echo"<option value=$cat>$cat</option>";
}
}
?>
我的代码(AddItemSubCat.php)
<?PHP
session_start();
if(@$_SESSION['Auth']!=="Yes") {
echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login.";
exit();
}
?>
<?PHP
if(@$_SESSION['Auth']=="Yes" && @$_SESSION['Type']=="Admin") {
include("cxn.inc");
//Gets the category parameter passed from the URL
$cat=$_GET['cat'];
$userid=$_SESSION['UserId']
$branchid=0;
$getsub="SELECT * FROM `SubCategories` WHERE `Business`=$userid AND Branch=$branchid && Category==$cat";
$runsub=mysqli_query($cxn,$getsub) or die (mysqli_error($cxn));
while($row=mysqli_fetch_assoc($runsub)) {
$sub=$row['Category'];
echo"<option value=$sub>$sub</option>";
}
}
?>
错误(或者更确切地说是缺少错误)
我的"类别"answers"子类别"下拉列表都是空的,什么都没有显示,我看不出它到底是什么,WTF——我做错了。有人能指出我的错误并告诉我如何纠正和改进吗?我已经看了两个小时的屏幕了,我还没有弄清楚我的错误,因为我根本没有得到任何东西(没有错误消息),只是一个有两个下拉框的表,完全是空的。
谢谢!
附言:我的最终目标是创建一个类似于在线商店中使用的表单,用户可以在其中上传商品以及附带的图片。我还没有添加表单的其余部分,因为我的投递箱不起作用,所以没有任何意义。
EDIT:向表单页添加了以前缺少的表。结果没有可见的更改,我仍然无法使代码正常工作。
编辑2:向代码中添加了各种警报。只有警报5、6和7在工作,当我加载页面时会弹出。javascript中的警报不起作用,所以问题显然出在javascript函数中,尽管我仍然看不出错误是什么。
我建议进行两次更改-
1.在页面加载时加载类别选择选项,而不是使用onclick
-将onload="getcategory()"
添加到您的身体标签中。
2.在类别更改时加载您的子类别选择选项
-将onchange="getsubcategory(this)"
添加到<select id="category">
,并从<select id="subcat" >
中删除onclick="getsubcategory(cat)"
-然后在getsubcategory()
中使用var catval = cat.options[cat.selectedIndex].value;
来获得选定的值。
现在看起来像
...
<!DOCTYPE html>
<html>
<head>
<script>
function getcategory() {
var xmlhttp;
if(window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp= new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("category").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","AddItemCat.php","true");
xmlhttp.send();
}
function getsubcategory(cat) {
var xmlhttp;
var catval = cat.options[cat.selectedIndex].value;
if(window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp= new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("subcat").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","AddItemSubCat.php?cat="+catval,"true");
xmlhttp.send();
}
</script>
</head>
<body onload="getcategory()">
<form action="<?PHP echo $_SERVER['PHP_SELF'] ?>" name="additem" enctype="multipart/form-data" method="POST">
<table>
<tr>
<td>Select Category: </td>
<select id="category" onchange="getsubcategory(this)">
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td>Select SubCategory</td>
<td>
<select id="subcat">
<option value=""></option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>