手册
目录
下例将演示网页如何使用 AJAX 从数据库中获取信息:
在下拉列表中选择一个客户:
将在本例中使用的数据库看起来类似这样:
| id | CustomerID | CompanyName | ContactName | Address | City | PostalCode | Country |
|---|---|---|---|---|---|---|---|
| 1 | Alibaba | Alibaba Group | Ma Yun | ...... | Hangzhou | 310002 | China |
| 2 | APPLE | Apple Inc. | Tim Cook | ...... | Cupertino | 95014 | USA |
| 3 | BAIDU | BAIDU Inc. | Li YanHong | ...... | Beijing | 100080 | China |
| 4 | Canon | Canon USA Inc. | Tsuneji Uchida | ...... | New York | 11042 | USA |
在上面的例子中,当用户在上面的下拉列表中选择客户时,会执行一个名为 showUser() 的函数。
该函数由 onchange 事件触发。
这是 HTML 代码:
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">请选择一个客户:</option>
<option value="1">Alibaba</option>
<option value="2">APPLE</option>
<option value="3">BAIDU</option>
<option value="4">Canon</option>
<option value="5">Google</option>
<option value="6">HUAWEI</option>
<option value="7">Microsoft</option>
<option value="8">Nokia</option>
<option value="9">SONY</option>
<option value="10">Tencent</option>
</select>
</form>
<br>
<div id="txtHint"><b>人员信息将在此处列出...</b></div>
</body>
</html>
运行实例
首先,检查是否选择了任何客户。如果没有选择人员(str == ""),则清除 txtHint 的内容并退出函数。
如果选择了某个客户,则执行以下操作:
XMLHttpRequest 对象q(带有下拉列表的内容)上面 JavaScript 调用的服务器上的页面是一个名为 getuser.php 的 PHP 文件。
getuser.php 中的源代码针对 MySQL 数据库运行查询,并将结果以 HTML 表格的形式返回:
$q = intval($_GET['q']);
$con = mysqli_connect('MyServer','MyUser','MyPassword');
if (!$con) {
die('无法连接:' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>";
while($row = mysqli_fetch_array($result)) {
echo "<tr><th>CustomerID</th><td>" . $row['CustomerID'] . "</td></tr>";
echo "<tr><th>CompanyName</th><td>" . $row['CompanyName'] . "</td></tr>";
echo "<tr><th>ContactName</th><td>" . $row['ContactName'] . "</td></tr>";
echo "<tr><th>Address</th><td>" . $row['Address'] . "</td></tr>";
echo "<tr><th>City</th><td>" . $row['City'] . "</td></tr>";
echo "<tr><th>PostalCode</th><td>" . $row['PostalCode'] . "</td></tr>";
echo "<tr><th>Country</th><td>" . $row['Country'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
当从 JavaScript 向 PHP 文件发送查询时,会发生以下情况:
txtHint 占位符相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.4万人学习
共29课时
62万人学习
共25课时
39.5万人学习
共43课时
71.3万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.8万人学习