AJAX：使用多個選擇框中的值顯示MySQL數據

我使用W3學校示例：http://www.w3schools.com/PHP/php_ajax_database.asp顯示數據庫數據表，給出從單個選擇框中的選擇。我如何修改這個以包含另一個選擇框，比如說我想要一個匹配名稱和年齡的記錄？AJAX：使用多個選擇框中的值顯示MySQL數據

來源

2010-04-07 Robert

變化

<select name="users" onchange="showUser()" id="name_select">

添加年齡下降從1到100

<select name="age" onchange="showUser()" id="age_select"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
        | 
    <option value="100">100</option> 
</select>

換下來

function showUser(str) 
{ 
xmlhttp=GetXmlHttpObject(); 
if (xmlhttp==null) 
    { 
    alert ("Browser does not support HTTP Request"); 
    return; 
    } 
name= document.getElementByID('name_select').value 
age= document.getElementByID('age_select').value 
var url="getuser.php"; 
url=url+"?q="+str+"&age="+age; 
url=url+"&sid="+Math.random(); 
xmlhttp.onreadystatechange=stateChanged; 
xmlhttp.open("GET",url,true); 
xmlhttp.send(null); 
}

變化在PHP

$age=$_GET["age"]; 
$sql="SELECT * FROM user WHERE id = '".$q."' and age=".$age;

來源

2010-04-07 14:54:21 Salil

如果他們*不選擇年齡，這不會是一個問題嗎？ – dclowd9901 2010-04-07 15:00:45

我有問題，現在沒有任何反應，如果我改變選擇 – Robert 2010-04-07 15:14:10

@Robert對不起親愛的你的showUser（str）現在應該是showUser（） – Salil 2010-04-08 03:56:00

你可以試試這個（下面這段代碼沒有進行測試，但它應該工作）

HTML頁面

<html> 
<head> 
<script type="text/javascript" src="selectuser.js"></script> 
</head> 
<body> 

<form> 
Select a User: 
<select name="users" id="users"> 
<option value="1">Peter Griffin</option> 
<option value="2">Lois Griffin</option> 
<option value="3">Glenn Quagmire</option> 
<option value="4">Joseph Swanson</option> 
</select> 

Select an age: 
<select name="age" id="age"> 
<option value="39">39</option> 
<option value="40">40</option> 
<option value="41">41</option> 
<option value="42">42</option> 
</select> 

<input type='button' value='Refresh Data' onclick="showUser(document.getElementById('users').value,document.getElementById('age').value)"> 
</form> 
<br /> 
<div id="txtHint"><b>Person info will be listed here.</b></div> 

</body> 
</html>

Java的腳本代碼：

var xmlhttp; 

function showUser(str,age) 
{ 
xmlhttp=GetXmlHttpObject(); 
if (xmlhttp==null) 
    { 
    alert ("Browser does not support HTTP Request"); 
    return; 
    } 
var url="getuser.php"; 
url=url+"?q="+str+"&a="+age; 
url=url+"&sid="+Math.random(); 
xmlhttp.onreadystatechange=stateChanged; 
xmlhttp.open("GET",url,true); 
xmlhttp.send(null); 
} 

function stateChanged() 
{ 
if (xmlhttp.readyState==4) 
{ 
document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
} 
} 

function GetXmlHttpObject() 
{ 
if (window.XMLHttpRequest) 
    { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    return new XMLHttpRequest(); 
    } 
if (window.ActiveXObject) 
    { 
    // code for IE6, IE5 
    return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
return null; 
}

PHP頁面爲

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

$con = mysql_connect('localhost', 'peter', 'abc123'); 
if (!$con) 
    { 
    die('Could not connect: ' . mysql_error()); 
    } 

mysql_select_db("ajax_demo", $con); 

$sql="SELECT * FROM user WHERE id = '".$q."' and age='".$a."'"; 

$result = mysql_query($sql); 

echo "<table border='1'> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
<th>Hometown</th> 
<th>Job</th> 
</tr>"; 

while($row = mysql_fetch_array($result)) 
    { 
    echo "<tr>"; 
    echo "<td>" . $row['FirstName'] . "</td>"; 
    echo "<td>" . $row['LastName'] . "</td>"; 
    echo "<td>" . $row['Age'] . "</td>"; 
    echo "<td>" . $row['Hometown'] . "</td>"; 
    echo "<td>" . $row['Job'] . "</td>"; 
    echo "</tr>"; 
    } 
echo "</table>"; 

mysql_close($con); 
?>

來源

2010-04-07 14:55:20

是否需要有一個按鈕來刷新數據？ – Robert 2010-04-07 15:13:12

不......不需要添加刷新按鈕。您可以將以下內容添加到：選擇HTML字段（名稱或年齡列表）的onchange事件：showuser（document.getElementById（'users'）value，document.getElementById（'age'）。value） – 2010-04-08 07:05:47

AJAX：使用多個選擇框中的值顯示MySQL數據

回答

相關問題