AJax로 검색창을 구현하는 방법

이번에는 AJax로 검색창을 구현하는 방법과 AJax로 검색창을 구현할 때의 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

인턴 과정에서 비동기 제출 기능을 사용해야 했기 때문에 Ajax를 이해하려고 노력했는데, 웹 애플리케이션 개발을 하면서 배운 내용이 정말 물거품이 됐다는 걸 느꼈습니다. jquery와 ajax를 모르면 정말 쓸모가 없습니다. 배우고 이해한 후에는 인터넷의 모든 멋진 기능이 이미 구현될 수 있다고 느꼈습니다.

더 이상 고민하지 않고, 사용자가 위 입력 상자에 문자를 입력하면 "showHint()" 함수가 실행되는 간단한 Baidu 검색 표시줄 기능을 구현했습니다. 이 함수는 "onkeyup" 이벤트에 의해 실행됩니다:

function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementByIdx_x("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementByIdx_x("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}

소스 코드 설명:

입력 상자가 비어 있으면(str.length==0) 이 함수는 txtHint 자리 표시자의 내용을 지우고 종료합니다. 기능.

입력 상자가 비어 있지 않으면 showHint() 함수는 다음 작업을 수행합니다.

XMLHttpRequest 객체 생성

서버 응답이 준비되면 함수 실행

서버의 파일로 요청 보내기

URL A 매개변수 q에 추가했습니다(입력 상자의 내용 포함)

요청한 파일은 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=$_GET["q"];
//如果 q 大于 0，则查找数组中的所有提示
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];
}
}
}
}
// 如果未找到提示，则把输出设置为 "no suggestion"
// 否则设置为正确的值
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//输出响应
echo $response;
?>

이 기사의 사례를 읽으신 후 마스터하셨다고 생각합니다. 방법, 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Ajax가 txt를 읽고 해당 내용을 페이지에 표시하는 방법

Ajax가 jSon을 탐색하여 데이터를 수정하고 삭제합니다

위 내용은 AJax로 검색창을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!