AJAX PHP 示例
AJAX 用于创建更具交互性的应用程序。
AJAX PHP 示例
下面的示例演示了当用户在输入字段中键入字符时网页如何与 Web 服务器通信:
例子
在下面的输入字段中开始输入名称:
建议:
名:
示例解释
在上面的例子中,当用户在输入字段中键入一个字符时,将调用一个函数 showHint()
被执行。
该功能由 onkeyup
事件。
以下是代码:
例子
<p>在下面的输入字段中开始输入名称:</p>
<p>建议:<span id="txtHint"></span></p>
<form>
名:<input type="text" onkeyup="showHint(this.value)">
</form>
<script>
函数 showHint (str) {
如果 (str.length == 0) {
文档.getElementById(“txtHint”).innerHTML =“”;
返回;
} 别的 {
const xmlhttp = 新的 XMLHttpRequest();
xmlhttp.onload = 函数(){
文档.getElementById (“txtHint”).innerHTML = this.responseText;
}
xmlhttp.open("GETHINT.html?q=" + str);
xmlhttp.发送();
}
}
</script>
亲自尝试 »
代码解释:
首先,检查输入字段是否为空(str.length == 0)。如果是,则清除txtHint占位符的内容并退出该函数。
但是,如果输入字段不为空,请执行以下操作:
- 创建 XMLHttpRequest 对象
- 创建在服务器响应准备就绪时执行的函数
- 将请求发送到服务器上的 PHP 文件 (gethint.html)
- 注意添加了q参数 gethint.html?q="+str
- str 变量保存输入字段的内容
PHP 文件 — “gethint.html”
PHP 文件检查名称数组,并将相应的名称返回给浏览器:
<?php
// 包含名称的数组
$a[] = "安娜";
$a[] = "布列塔尼";
$a[] = "灰姑娘";
$a[] = "戴安娜";
$a[] = "伊娃";
$a[] = "菲奥娜";
$a[] = "贡达";
$a[] = "赫格";
$a[] = "英加";
$a[] = "约翰娜";
$a[] = "小猫";
$a[] = "琳达";
$a[] = "尼娜";
$a[] = "奥菲莉亚";
$a[] = "矮牵牛";
$a[] = "阿曼达";
$a[] = "拉奎尔";
$a[] = "辛迪";
$a[] = "多丽丝";
$a[] = "夏娃";
$a[] = "艾薇塔";
$a[] = "Sunniva";
$a[] = "托芙";
$a[] = "姐姐";
$a[] = "紫罗兰";
$a[] = "丽莎";
$a[] = "伊丽莎白";
$a[] = "艾伦";
$a[] = "温彻斯特";
$a[] = "Vicky";
// 从 URL 获取 q 参数
$q = $_REQUEST["q"];
$提示=“”;
// 如果 $q 与“”不同,则从数组中查找所有提示
如果 ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a 作为 $name) {
如果 (stristr($q, substr($name, 0, $len))) {
如果 ($hint === "") {
$提示=$名称;
} 别的 {
$hint .= ", $name";
}
}
}
}
// 如果没有找到提示则输出“无建议”或者输出正确值
echo $hint === "" ? "没有建议" : $hint;
?>