黑马程序员技术交流社区
标题: 【上海校区】JavaScript AJAX PHP [打印本页]
作者: 梦缠绕的时候 时间: 2019-8-5 10:59
标题: 【上海校区】JavaScript AJAX PHP
AJAX PHP示例AJAX用于创建更多交互式应用程序。
以下示例演示了当用户在输入字段中键入字符时，网页如何与Web服务器通信：
[url=]
[/url]
<!DOCTYPE html><html><meta charset="utf-8"><title>ajax</title><body><h2> XMLHttpRequest 对象 </h2><h3>开始在下面的input字段中键入名称：</h3><p>建议: <span id="txtHint"></span></p><p>First name: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p><script> function showHint(str) { var xhttp; if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xhttp.open("GET", "/jc_script/gethint.php?q="+str, true); xhttp.send(); }</script></body></html>[url=][/url]
在上面的示例中，当用户在输入字段中键入字符时，showHint()执行被调用的函数。该函数由onkeyup事件触发。
代码说明：首先，检查input字段是否为空（str.length == 0）。如果是，请清除txtHint占位符的内容并退出该函数。但是，如果输入字段不为空，请执行以下操作：
- 创建XMLHttpRequest对象
- 创建服务器响应准备好时要执行的函数
- 将请求发送到服务器上的PHP文件（gethint.php）
- 请注意，“gethint.php？q=“+ str添加了q参数
str变量保存input字段的内容
PHP文件 - “gethint.php”PHP文件检查名称数组，并将相应的名称返回给浏览器：
[url=][/url]
<?php// 带名字的数组$a[] = "Anna";$a[] = "Brittany";$a[] = "Cinderella";$a[] = "Diana";$a[] = "Eva";$a[] = "Fiona";$a[] = "Gunda";$a[] = "Hege";$a[] = "Inga";$a[] = "Johanna";$a[] = "Kitty";$a[] = "Linda";$a[] = "Nina";$a[] = "Ophelia";$a[] = "Petunia";$a[] = "Amanda";$a[] = "Raquel";$a[] = "Cindy";$a[] = "Doris";$a[] = "Eve";$a[] = "Evita";$a[] = "Sunniva";$a[] = "Tove";$a[] = "Unni";$a[] = "Violet";$a[] = "Liza";$a[] = "Elizabeth";$a[] = "Ellen";$a[] = "Wenche";$a[] = "Vicky";// 从URL获取q参数$q = $_REQUEST["q"];$hint = "";// 如果$q不等于""，则从数组中查找所有提示if ($q !== "") { $q = strtolower($q); $len=strlen($q);foreach($a as $name) { if (stristr($q, substr($name, 0, $len))) { if ($hint === "") { $hint = $name; } else { $hint .= ", $name"; } } }}// 如果未找到提示或输出正确值，则输出“无建议”echo $hint === "" ? "无建议" : $hint;[url=][/url]
作者: 梦缠绕的时候 时间: 2019-8-5 11:00
有任何问题欢迎在评论区留言
作者: 梦缠绕的时候 时间: 2019-8-5 11:00
或者添加学姐微信
DKA-2018
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |