JavaScript AJAX PHP

108 阅读1分钟
 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]