PHP Beginner's Introduction to AJAX and PHP

1. AJAX is used to create more interactive applications

2.ajax php Example

The following example will demonstrate when the user enters the input box How does the web page communicate with the Web server when characters are typed in

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
	function showHint(str){
		if (str.length==0){ 
			document.getElementById("txtHint").innerHTML="";
			return;
		}
		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","gethint.php?q="+str,true);
		xmlhttp.send();
	}
	</script>
</head>
<body>

<p><b>在输入框中输入一个姓名:</b></p>
<form> 
姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>

</body>
</html>

If the input box is empty (str.length==0), this function will clear the content of the txtHint placeholder and exit the function.

If the input box is not empty, then showHint() will perform the following steps:

Create an XMLHttpRequest object

Create a function that is executed when the server response is ready

Send a request to the file on the server

Please pay attention to the parameter (q) added to the end of the URL (contains the content of the input box)

PHP file

The above paragraph The server page called via JavaScript is a PHP file named "gethint.php".

The source code in "gethint.php" will check the name array and then return the corresponding name to the browser:

gethint.php source code is as follows:

<?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;
?>

Explanation: If JavaScript sends any text (i.e. strlen($q) > 0), this will happen:

Find names matching the characters sent by JavaScript

If no match is found, this will respond String set to "no suggestion"

If one or more matching names are found, set the response string with all names

Send the response to the "txtHint" placeholder

Continuing Learning

new file

<?php echo "欢迎学习ajax"; ?>

submit Reset Code

Automatic operation

PHP Beginner's Introduction to AJAX and PHP

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]