ajax ,jquery,php实现查找并更新显示数据

最新推荐文章于 2025-11-26 21:34:11 发布

原创最新推荐文章于 2025-11-26 21:34:11 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

php 同时被 2 个专栏收录

11 篇文章

订阅专栏

阿贾克斯

3 篇文章

订阅专栏

本文介绍了一个简单的Ajax应用实例，通过使用PHP后端与jQuery前端相结合的方式，在用户输入姓名时实时提供匹配建议。该示例展示了如何利用$.get发起请求，并在PHP中处理字符串匹配逻辑。

运行环境:HBuilder wampserver

语言:jquery ,ajax,php

如下图：

demo1.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script>
            $(function() {
             $("#name").on("keyup",function(){
             $.get("demo1.php",{q:this.value},function(data){
             	$("#txtHint").html(data);
             })
             })
            })
        </script>
    </head>

    <body>
        <form>
            姓名:
            <input type="text" id="name" value="" />
            <p>返回值:<span id="txtHint"></span></p>
        </form>
    </body>

</html>

demo1.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";

$q = isset($_GET["q"])?$_GET["q"]:' ';
if(strlen($q)==0){
	echo "请输入姓名";
	exit;
}
if(strlen($q)>0){
	$hint = " ";
	for($i = 0 ; $i < count($a);$i++){
		if(strtolower($q) == strtolower(substr($a[$i],0,strlen($q)))){
			if($hint==" "){
				$hint = $a[$i];
			}else{
				
				$hint = $hint." , ".$a[$i];
			}
		}
	}
}
	if($hint == " "){
		$response = "不存在";
	}else{
		$response = $hint;
	}
	echo $response;

?>