> 웹 프론트엔드 > JS 튜토리얼 > AJax로 검색창을 구현하는 방법

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

php中世界最好的语言
풀어 주다: 2018-04-03 10:41:57
원래의
1528명이 탐색했습니다.

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿