在本章中,我们将演示如何将AJAX请求发送到PHP文件以及如何检索PHP文件的内容。
AJAX PHP示例1
以下示例显示了网页如何与网络服务器通信并检索PHP文件的内容:
30/01/2023, 03:31:27 PM
示例说明:
在上面的示例中,事件fetchDoc()执行了一个函数onclick。
这是HTML代码:
<button type="button" onclick="fetchDoc()">Fetch Content</button>
<div id="output"></div>
<script>
function fetchDoc() {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("output").innerHTML = this.responseText;
}
};
httpRequest.open("GET", "ajax_time.php", true);
httpRequest.send();
}
</script>
这是PHP代码(ajax_time.php):
<?php
echo date("d/m/Y, h:i:s A");
?>
AJAX PHP示例2
以下示例显示了在用户在输入字段中键入字符时网页如何与Web服务器通信:
在下面的输入字段中开始输入国家/地区名称:
国家:
意见建议:
示例说明:
在上面的示例中,当用户在输入字段中键入字符时,事件showHint()将执行功能onkeyup。
这是HTML代码:
<!DOCTYPE html>
<html>
<div>
<p>在下面的输入字段中开始输入国家/地区名称:</p>
<p>国家: <input type="text" onkeyup="showHint(this.value)"></p>
<p>建议: <span id="result"></span></p>
</div>
<script>
var elem = document.getElementById("result");
function showHint(name) {
if (name.length === 0) {
elem.innerHTML = "";
return;
} else {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
elem.innerHTML = this.responseText;
}
};
httpRequest.open("GET", "ajax_hint.php?q=" + name, true);
httpRequest.send();
}
}
</script>
</html>
这是PHP代码(ajax_hint.php):
<?php
// 国家名数组
$countries = array("Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra",...);
// 从URL获取q参数
$q = $_REQUEST["q"];
$hint = "";
// 如果$q与数组中的提示不同,则循环遍历数组中的所有提示 ""
if ($q !== "") {
$q = strtolower($q);
$len = strlen($q);
foreach($countries as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
//如果没有发现提示或输出正确的值,则输出“no suggestion”
echo $hint === "" ? "no suggestion" : $hint;
?>
有关国家名称的完整列表,请参见https://gist.github.com/DHS/1340150