AJAX 可用来与数据库进行交互式通信。
AJAX 数据库实例
在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从 MySQL 数据库中读取信息。
在下拉列表中选择一个客户
Alibaba
此处将列出客户信息。
这个应用程序由四个元素组成：
MySQL 数据库
一张简单的 HTML 表单
JavaScript
PHP 页面
数据库
将在本例中使用的数据库看起来类似这样：
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 代码：
实例
<!doctype html>
<html>
<head>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").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 (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","/demo/getcustomer.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）被添加到 URL（带有下拉列表的内容）
PHP 文件
上面的 JavaScript 调用的服务器上的页面是一个名为“getuser.php”的 PHP 文件。
“getuser.php”中的源代码对 MySQL 数据库运行查询，并在 HTML 表中返回结果：
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('MyServer','MyUser','MyPassword','Customers');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
$sql="SELECT * FROM customerslist 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 文件时，会发生以下情况：
PHP 打开与 MySQL 服务器的连接
找到了正确的客户
创建一个 HTML 表，填充数据，并发送回“txtHint”占位符
AJAX XML
AJAX responseXML
VUE
PHP 参考手册
PHP 测验
W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权 |
发表于 2021-2-19 14:33
|