2013-02-15 38 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