PHP 개발 기본 튜토리얼 AJAX 및 PHP

AJAX 및 PHP 예제

한 문장 요약: AJAX는 보다 대화형 애플리케이션을 만드는 데 사용됩니다

다음 예는 사용자가 입력 상자에 문자를 입력할 때 웹 페이지가 웹 서버와 어떻게 통신하는지 보여줍니다.

페이지 효과는 오른쪽 그림에 표시됩니다

예제 설명 - HTML 페이지

위 입력창에 사용자가 문자를 입력하면 "showHint()" 함수가 실행됩니다. 이 함수는 "onkeyup" 이벤트에 의해 실행됩니다:

참고: onkeyup 이벤트는 키보드 키를 놓을 때 발생합니다.

구체적인 코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str){
	//如果输入框是空的（str.length==0），该函数会清空 txtHint 占位符的内容，并退出该函数。
	if(str.length==0){
		document.getElementById("txtHint").innerHTML="";
		return;
	}
	//如果输入框不是空的，那么 showHint() 会执行以下代码：
	//创建XMLHttpRequest对象
	if(window.XMLHttpRequest){
		//IE7,Firefox,Chrome,Opera,Safari 浏览器执行的代码
		xmlhttp=new XMLHttpRequest();
	}else{
		//IE6,IE5浏览器执行的代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//在服务器响应的时候执行的函数
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4&&xmlhttp.status==200){
			document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
		}
	}
	//向服务器上的文件发送请求
	xmlhttp.open("GET","2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<p><b>在输入框中输入一个姓名</b></p>
<form>
<!-- onkeyup 事件会在键盘按键被松开时发生，键盘松开时，调用showHint()函数-->
姓名：<input type="text" onkeyup="showHint(this.value)">
<p>返回值：<span id="txtHint"></span></p>
</form>
</body>
</html>

소스 코드 설명 :

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

입력 상자가 비어 있지 않으면 showHint()는 다음 단계를 수행합니다.

XMLHttpRequest 객체 생성

서버 응답 시 실행할 함수 생성 준비됨

서버의 파일에 요청 보내기

URL 끝에 추가된 매개변수(q)를 참고하세요(입력 상자의 내용 포함)

예제 설명 - PHP 파일

위에서 JavaScript를 통해 호출되는 서버 페이지는 "2.php"라는 이름의 PHP 파일입니다.

"2.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";
$a[]="小明";

//从请求URL地址中获取 q 参数
$q=$_GET["q"];

//查找是否由匹配值， 如果 q>0
if (strlen($q) > 0)
{
	$hint="";
	for($i=0; $i<count($a); $i++)
	{
		//将$a数组和$q全部转换为小写，然后逐个取出$a,截取与$q相同长度，比较是否相同，相同放入$hint中
		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;
?>

설명:

JavaScript가 텍스트(예: strlen($q) > 0)를 보내면 다음과 같은 일이 발생합니다.

JavaScript에서 보낸 문자와 일치하는 이름을 찾습니다.

아니요 일치하는 항목이 발견되면 응답 문자열을 "제안 없음"으로 설정

일치하는 이름이 하나 이상 발견되면 모든 이름으로 응답 문자열을 설정합니다.

응답을 "txtHint"로 보냅니다. " 자리 표시자

학습 경험

이 예제에는 주로 다음 지식 포인트가 포함되어 있습니다.

폼 기본
Onkeyup 이벤트: 키보드 키가 눌렸을 때 출시
함수 호출, 함수 값 전송
AJAX XMLHttpRequest 객체 생성, 서버 응답 시 실행되는 함수, 값 전달 서버로 파일 전송 요청: 학습 경험은 1-5 참조
HTML DOM getElementById() 메소드: 지정된 ID를 가진 첫 번째 객체에 대한 참조를 반환합니다
배열 할당 방법
Get 방법 양식 제출

문자열 관련 기능:

strlen()
count()
Strtolower()

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function showHint(str){ //如果输入框是空的（str.length==0），该函数会清空 txtHint 占位符的内容，并退出该函数。 if(str.length==0){ document.getElementById("txtHint").innerHTML=""; return; } //如果输入框不是空的，那么 showHint() 会执行以下代码： //创建XMLHttpRequest对象 if(window.XMLHttpRequest){ //IE7,Firefox,Chrome,Opera,Safari 浏览器执行的代码 xmlhttp=new XMLHttpRequest(); }else{ //IE6,IE5浏览器执行的代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //在服务器响应的时候执行的函数 xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } //向服务器上的文件发送请求 xmlhttp.open("GET","2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <p><b>在输入框中输入一个姓名</b></p> <form>  姓名：<input type="text" onkeyup="showHint(this.value)"> <p>返回值：<span id="txtHint"></span></p> </form> </body> </html>

제출하다 코드 재설정

자동운전