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数据

回答

相关问题