小码哥的IT人生

AJAX PHP 实例

JavaScript基础 2022-04-25 01:53:19小码哥的IT人生shichen

AJAX PHP 实例

AJAX 用于创建更具交互性的应用程序。

AJAX PHP 实例

下面的例子演示:当用户在输入字段中键入字符时,网页如何与 web 服务器进行通信:

示例代码:

请在下面的输入字段中键入字母 A-Z:

姓名:

搜索建议:

例子解释

在上面的例子中,当用户在输入字段中键入字符时,会执行名为 "showHint()" 的函数。

此函数被 onkeyup 事件触发。

下面是 HTML 代码:

示例代码:

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        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", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<p><b>请在下面的输入字段中键入姓名:</b></p>
<form> 
姓或名:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>建议:<span id="txtHint"></span></p>
</body>
</html>

完整实例:

<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<h2>请在下面的输入字段中键入字母 A-Z:</h2>
<p>搜索建议:<span id="txtHint"></span></p> 
<p>姓名:<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", "/demo/gethint.php?q="+str, true);
  xhttp.send();   
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

代码解释:

首先,检查输入字段是否为空(str.length == 0),如果是,清空 txtHint 占位符的内容并退出函数。

不过,如果输入字段不为空,则进行如下:

  1. 创建 XMLHttpRequest 对象
  2. 创建当服务器响应就绪时执行的函数
  3. 发送请求到服务器上的 PHP 文件(gethint.php)
  4. 请注意添加到 gethint.php 的 q 参数
  5. str 变量保存了输入字段的内容

PHP 文件 - "gethint.php"

这个 PHP 文件检查姓名数组,然后向浏览器返回对应的姓名:

<?php
// 姓名数组
 $a[] = "Ava";
 $a[] = "Brielle";
 $a[] = "Caroline";
 $a[] = "Diana";
 $a[] = "Elise";
 $a[] = "Fiona";
 $a[] = "Grace";
 $a[] = "Hannah";
 $a[] = "Ileana";
 $a[] = "Jane";
 $a[] = "Kathryn";
 $a[] = "Laura";
 $a[] = "Millie";
 $a[] = "Nancy";
 $a[] = "Opal";
 $a[] = "Petty";
 $a[] = "Queenie";
 $a[] = "Rose";
 $a[] = "Shirley";
 $a[] = "Tiffany";
 $a[] = "Ursula";
 $a[] = "Victoria";
 $a[] = "Wendy";
 $a[] = "Xenia";
 $a[] = "Yvette";
 $a[] = "Zoe";
 $a[] = "Angell";
 $a[] = "Adele";
 $a[] = "Beatty";
 $a[] = "Carlton";
 $a[] = "Elisabeth";
 $a[] = "Violet";
// 从 URL 获取 q 参数
$q = $_REQUEST["q"];
$hint = "";
// 查看数组中所有 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";
            }
         }
    }
}
// 输出 "no suggestion",如果未找到 hint 或输出正确的值
  echo $hint === "" ? "no suggestion" : $hint;
?>

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024