AJAX - PHP

2025年3月17日 | 阅读 3 分钟

AJAX 代表 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）。AJAX 是一种利用 XML、HTML、CSS 和 JavaScript 来创建更好、更快、更具交互性的 Web 应用程序的新技术。
传统的 Web 应用程序通过同步请求在服务器和客户端之间传输信息。这意味着您填写一个表单，点击提交，然后被重定向到一个新页面，其中包含来自服务器的新信息。
使用 AJAX，按下提交按钮时，JavaScript 会向服务器发送请求，解释结果并更新当前屏幕。严格来说，用户永远不会知道任何信息被发送到了服务器。

下面的示例将演示网页如何在用户在输入字段中键入字符时与 Web 服务器进行通信。

说明

在上面的示例中，当用户在输入字段中键入字符时，会执行一个名为“showing()”的函数。

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>Start typing a name in the input field below:</b></p>
<form action="">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

代码解释

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

如果输入字段不为空，则执行以下操作：

创建一个 XMLHttpRequest 对象
创建当服务器响应准备就绪时要执行的函数
将请求发送到服务器上的一个 PHP 文件（gethint.php）
请注意，q 参数已添加到 url 中（gethint.php?q="+str）。
而 str 变量保存着输入字段的内容。

PHP 文件 - “gethint.php”。

PHP 文件会检查一个姓名数组，并将相应的姓名返回给浏览器。

<?php
// Array with names
$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";

// fetch q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
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";
      }
    }
  }
}

// It results in "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>

输出

下一主题Logo Makers

AJAX - PHP

说明

PHP 文件 - “gethint.php”。

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

博客

AJAX - PHP

说明

PHP 文件 - “gethint.php”。

相关帖子

动态语言

Spark 大数据

股票回购的优缺点

机器语言的优缺点

顶级远程访问软件

分布式系统的优缺点

资源描述框架 (RDF)

反向图像搜索

数据工程 vs 数据分析师

在家工作的优缺点

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器