AJAX PHP示例

AJAX用于创建更多交互式应用程序。
以下示例演示了当用户在输入字段中键入字符时，网页如何与Web服务器通信：
<!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>

体验一下交互

在上面的示例中，当用户在输入字段中键入字符时，showHint()执行被调用的函数。该函数由onkeyup事件触发。

代码说明：首先，检查input字段是否为空（str.length == 0）。如果是，请清除txtHint占位符的内容并退出该函数。但是，如果输入字段不为空，请执行以下操作：
  • 创建XMLHttpRequest对象
  • 创建服务器响应准备好时要执行的函数
  • 将请求发送到服务器上的PHP文件（gethint.php）
  • 请注意，“gethint.php？q=“+ str添加了q参数

  • str变量保存input字段的内容

PHP文件 - “gethint.php”

PHP文件检查名称数组，并将相应的名称返回给浏览器：
<?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;

更详细的AJAX文章教程

JavaScript AJAX PHP的更多相关文章

  1. JavaScript Ajax之美~

    JavaScript Ajax之美~ 曾经有一段时期,因为开发人员对JavaScript的滥用导致其遭受了一段时间的冷门时期,不被大家看好,后来,到了2005年,Google公司的很多技术都是用了aj ...

  2. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  3. 2、.net NVelocity中原生javascript ajax封装使用

    在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var x ...

  4. javascript ajax 脚本跨域调用全解析

    javascript ajax 脚本跨域调用全解析 今天终于有点时间研究了一下javsscript ajax 脚本跨域调用的问题,先在网上随便搜了一下找到一些解决的办法,但是都比较复杂.由是转到jqu ...

  5. 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  6. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  7. [转载]javascript+ajax+jquery教程11--正则表达式

    原文地址:javascript+ajax+jquery教程11--正则表达式作者:morflame 正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个 ...

  8. JavaScript AJAX原生写法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. 非常优秀的Javascript(AJAX) 开发工具：Aptana

    非常优秀的Javascript(AJAX) 开发工具:Aptana 下面我要向你介绍一款非常优秀的Javascript(AJAX) 开发工具:Aptana.应为它实在太棒了,所以我忍不住想向你推荐它. ...

  10. javascript --- Ajax基础

    神马是Ajax? Ajax即‘Asynchronous javascript and XML’(异步javascript和XML),也就是所谓的无刷新页面读取技术. http请求 首先要了解http请 ...

随机推荐

  1. IOS 11 下适配UITableView

    9月份苹果发布了IOS11和Iphone X,这一操作系统一硬件对于开发者适配上面还是造作了不少蛋疼的地方.先来看看IOS 11,这些蛋疼的需要适配的地方: 1.UIScrollView及其子类在IO ...

  2. Django和前端用ajax传输json等数据

    需要传输的是下图中所有的input中客户端设置的数据 整个页面是用js生成,代码不长,但是用了许多拼接,看起来开比较乱,页面的核心就是下面的部分,有一些关键参数部分就不放了,可以跳过这个 下面开始重点 ...

  3. nRF24L01+启用自动应答ACK及自动重发的实战分享

    ACK模式(自动应答)功能的官方说明 当用W_TX_PAYLOAD命令对发送端TX FIFO写数据时,将数据打包后,数据包中包控制字段NO_ACK 标志位复位.接收端接收到一帧有效数据后, 产生RX_ ...

  4. Git入门基础教程和SourceTree应用

    目录 一.Git的安装 1.1 图形化界面 1.2 命令行界面 二.本地仓库的创建与提交 2.1 图形化界面 2.1.1 首先在电脑上有一个空白目录 2.1.2 打开SourceTree 2.1.3 ...

  5. Jmeter通过正则表达式获取登录后token

    1.引用名称:即参数化,便于后面调用登录后获取的token 2.正则表达式:"token":"([0-9 a-z -]+?)" 3.模板:设置为 "$ ...

  6. 在Rust中使用C语言的库功能

    主要是了解unsafe{}语法块的作用. #[repr(C)] #[derive(Copy, Clone)] #[derive(Debug)] struct Complex { re: f32, im ...

  7. Vue生命周期钩子---3

    vue生命周期流程图:4张图 : 生命周期的解析和应用: Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue ...

  8. LG1393 动态逆序对

    问题描述 LG1393 题解 本题可以使用\(\mathrm{CDQ}\)分治完成. 二维偏序 根据偏序的定义,逆序对是一个二维偏序,但这个二维偏序比较特殊: \(i>j,a_i<a_j\ ...

  9. 关于一个.2lf和.2f的战争！（貌似书上错了，静待打脸。）

    在山东理工oj上做题,谈到了输入数据... double i: scanf(“%lf”,&i): 谨记呀,lf时,可以输入任何类型的数据,而.2f,只能输入符合其规格的数据. 再谈输出,dou ...

  10. MySQL统计信息简介

    作者:王小龙@网易乐得DBA 原文地址: http://mp.weixin.qq.com/s/698g5lm9CWqbU0B_p0nLMw MySQL执行SQL会经过SQL解析和查询优化的过程,解析器 ...