2013-02-15 110 views
2

感謝您檢查了這一點。堆疊ajax請求

我在mysql中有一個數據庫,它目前填滿了一個下拉菜單,它選擇填充第二個下拉菜單,使用ajax xmlhttprequest到運行mysql查詢的php文件。

我想然後根據第二個下拉列表中的選擇顯示一個表格,同時仍然保留第一個下拉功能。

到目前爲止,我已經嘗試在主文檔中添加第二個js調用,並且還嘗試將該js調用放到由第一個調用的php文件的輸出中。

這兩個選項似乎都不起作用。

正是我試圖做可能嗎?

日誌文件從不顯示它試圖getclubs.php所以我假設GetClub調用永遠不會被觸發。

test.php的:

<html> 
<title> 
demo </title> 
<head> 
<script> 
function GetCounty(str) 
{ 
if (str=="") 
    { 
    document.getElementById("countymenu").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
    } 
     else 
     {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("countymenu").innerHTML=xmlhttp.responseText; 
    } 
} 
xmlhttp.open("GET","getcounty.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 
<script> 
function GetClubs(str) 
{ 
if (str=="") 
    { 
    document.getElementById("clubtable").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document.getElementById("clubtable").innerHTML=xmlhttp.responseText; 
} 
    } 
xmlhttp.open("GET","getclub.php?q="+str,true); 
xmlhttp.send(); 
    } 
    </script> 
    </head> 
    <body> 


<? 
// Load field datas into List box 
$cn=mysql_connect("localhost","user","password") or die("Note: " . mysql_error()); 
echo "Conn ok<br>"; 
$res=mysql_select_db("snowusa_clubs",$cn) or die("Note: " . mysql_error()); 
echo " Database opened<br>"; 
//$rescounty=mysql_query("SELECT * FROM county WHERE state_id='33' ORDER by name;") or die ("Note: " . mysql_error()); 
    $resstate=mysql_query("SELECT * FROM state ORDER by longstate;") or die("Note: " . mysql_error()); 
echo " qry executed<br>"; 
?> 
<h1>Select</h1> 


State: 
<select name="State" size=1 onchange="GetCounty(this.value)"> 
<option value="">Select a State</option> 
<? 
    while($rs = mysql_fetch_array($resstate)) 
{ 
echo "<option value=" .$rs['id'] . ">" . $rs['longstate'] . "</option>"; 
} 
echo "</select> " 
?> 
<p> 
</p> 
<div id="countymenu"><b>County menu for selected state will be listed here.</b></div> 




</body> 
</html> 

getcounty:PHP:

<?php 
$q=$_GET["q"]; 

$cn=mysql_connect("localhost","user","password"); 
if (!$cn) 
    { 
    die('Could not connect: ' . mysql_error()); 
    } 

mysql_select_db("snowusa_clubs", $cn); 

$sql="SELECT * FROM county WHERE state_id = '".$q."' ORDER by name"; 

$result = mysql_query($sql); 

$fulllist="SELECT * FROM allclubs WHERE stateid = '".$q."' ORDER by clubname"; 
$listresult = mysql_query($fulllist); 




echo "County : <select name=\"County\" size=1 onchange=\"GetClub(this.value)\">"; 

echo "<option value=\"\">Select County</option>"; 

while($rc = mysql_fetch_array($result)) 
{ 
echo "<option value=" .$rc['id'] . ">" . $rc['name'] . "</option>"; 
} 
echo "</select>"; 

echo "<p></p>"; 
echo "Table of All Clubs in Selected State:</br>"; 

echo "<table border='1'> 
<tr> 
<th>County</th> 
<th>Club Name</th> 
<th>Address</th> 
<th>Phone</th> 
<th>Website</th> 
<th>Email</th> 

</tr>"; 

while($row = mysql_fetch_array($listresult)) 
    { 
    echo "<tr>"; 
    echo "<td>" . $row['county'] . "</td>"; 
    echo "<td>" . $row['clubname'] . "</td>"; 
    echo "<td>" . $row['address'] . "</td>"; 
    echo "<td>" . $row['phone'] . "</td>"; 
    echo "<td>" . $row['website'] . "</td>"; 
    echo "<td>" . $row['email'] . "</td>"; 
    echo "</tr>"; 
    } 
    echo "</table>"; 

    echo "<div id='clubtable'><b>Club Listing will appear as a table here.</b></div>"; 

    mysql_close($cn); 
    ?> 

getclub.php

<?php 
$q=$_GET["q"]; 

$cn=mysql_connect("localhost","user","password"); 
if (!$cn) 
    { 
    die('Could not connect: ' . mysql_error()); 
    } 

mysql_select_db("snowusa_clubs", $cn); 

$sql="SELECT * FROM allclubs WHERE countyid = '".$q."' ORDER by clubname"; 

$clubresult = mysql_query($sql); 




echo "<table border='1'> 
<tr> 
<th>County</th> 
<th>Club Name</th> 
<th>Address</th> 
<th>Phone</th> 
<th>Website</th> 
<th>Email</th> 

</tr>"; 

while($row = mysql_fetch_array($clubresult)) 
    { 
    echo "<tr>"; 
    echo "<td>" . $row['county'] . "</td>"; 
    echo "<td>" . $row['clubname'] . "</td>"; 
    echo "<td>" . $row['address'] . "</td>"; 
    echo "<td>" . $row['phone'] . "</td>"; 
    echo "<td>" . $row['website'] . "</td>"; 
    echo "<td>" . $row['email'] . "</td>"; 
    echo "</tr>"; 
    } 
    echo "</table>"; 


mysql_close($cn); 
?> 
+4

平變化= 「GetClub ...」 而不' S'。你的實際功能名稱有's',GetClubs。 – andho 2013-02-15 03:19:08

+1

就是這樣:):smackhead: – 2013-02-15 03:27:31

+1

請注意'XMLHttpRequest'在IE7 +中不能正常工作到10個。相反,你會停止重新發明輪子並開始使用流行的JavaScript庫,比如'Jquery' – Yang 2013-02-15 03:34:50

回答

1

我的建議是重組以下一些小步驟的代碼:

  1. 服務器端代碼響應將是JSON數據
  2. 讓你的客戶端調用使用jQuery,避免管理水平低HTTP調用
  3. 渲染代碼,並在添加事件處理程序

    - GET HTTP calls with : http://api.jquery.com/jQuery.get/ 
    - how to add a event : http://api.jquery.com/bind/ 
    
    :使用jQuery處理程序注入的飛行

jQuery的一些參考客戶210個

一些例子:

簡單GET HTTP調用test.php的

$.get("test.php", function(data) { 
    alert("Data Loaded: " + data); 
}); 

添加點擊ID爲一個元素= FOO

$('#foo').bind('click', function() { 
    alert('User clicked on "foo."'); 
}); 
+2

爲什麼他會用'.bind()'的時候他可以使用'.on()'?從jQuery 1.7開始,'.on()'方法是將事件處理程序附加到文檔的首選方法。 – 2013-02-15 03:37:53

+0

感謝您的指點,我將不得不看看這些參考資料,看看我能否理解它們:) – 2013-02-15 03:43:09

+0

好點@RPM :)剛剛忘了'.on()' – 2013-02-15 03:46:20