2013-07-20 94 views
1

我是新來的Ajax和一般的編程,而且我目前正在學習中。無法使用Ajax和Javascript填充鏈接的下拉列表

我的目標

目前我正在試圖創建與第一個下拉從我的數據庫填充本身就是一個鏈接下拉列表,第二個下拉填充本身基於用戶的第一下拉選擇。

我的代碼(表頁)

<?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>"; 
    } 
    } 
?> 

錯誤(或者說缺乏錯誤)

我的兩個類別和子類別的下拉列表是空的,什麼都不顯示了,我什麼也看不見它到底是跆拳道這是我做錯了。任何人都可以指出我的錯誤,並告訴我如何改正它們並改進?我一直在尋找屏幕2小時不是,我沒有更接近找出我的錯誤,因爲我根本沒有得到任何東西(沒有錯誤信息),只有一張桌子上有2個完全空的下拉框。

謝謝!

PS:我的最終目標是創建一個類似於在線商店中使用的表單,用戶可以在其中上傳項目以及附帶的圖片。我還沒有添加表單的其餘部分,因爲沒有任何意義,因爲我的保管箱不工作。

編輯:添加一個表到表單頁失蹤之前沒有可見的更改結果,我仍然無法獲得代碼工作。

編輯2:添加各種警報的代碼。只有警報5,6和7正在工作,彈出當我加載頁面。JavaScript中的警報不工作,所以問題顯然在於JavaScript函數,但我仍然不能看到錯誤是什麼。

+3

我,這將是很容易使用jQuery AJAX做。你有沒有考慮過? – Maximus2012

+0

這裏的問題是,我只是剛剛開始使用Javascript,並且必須觸及jquery,因爲我認爲在移動到jquery之前,至少應該掌握javascript和AJAX是一個好主意。 –

+0

這是有道理的。雖然我會說現在你幾乎可以獨立學習jQuery和JavaScript。看看這個教程:http://www.blueicestudios.com/chained-select-boxes-using-php-mysql-ajax/看看這是你試圖實現的東西。從頭開始學習一些東西是個好主意,但這不是JavaScript函數如何實現的最近,因爲像jQuery這樣的JS庫相當有效地處理了這個部分。 – Maximus2012

回答

0

我會建議2點的變化 - 而不是使用onclick

1.Load您的等級在頁面加載選擇選項。
-Add onload="getcategory()"添加到您的身體標記。

2.載入您的子類別選擇選項更改類別。
- 添加onchange="getsubcategory(this)"<select id="category">,並移除<select id="subcat" >
- 然後使用var catval = cat.options[cat.selectedIndex].value;onclick="getsubcategory(cat)"getsubcategory()獲取所選值。

現在看起來像 -

... 
<!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> 
+0

它的工作原理!我愛你。在另一個說明中,在標記中使用onload而不是在