PHP development basic tutorial AJAX and PHP

AJAX and PHP examples

Summary in one sentence: AJAX is used to create more interactive applications

The following example will demonstrate how the web page communicates with the Web server when the user types characters in the input box:

The page effect is shown in the picture on the right

Explanation of examples - HTML page

When the user types characters in the input box above, the "showHint()" function will be executed. This function is triggered by the "onkeyup" event:

Note: the onkeyup event will occur when the keyboard key is released

The specific code is as follows

<!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>

Source code explanation :

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)

Explanation of examples - PHP file

The server page called above through JavaScript is a PHP file named "2.php".

The source code in "2.php" will check the name array and then return the corresponding name to the browser. The 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";
$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;
?>

Explanation:

If JavaScript sends any text (i.e. strlen($q) > 0), what happens is:

Find names matching the characters sent by JavaScript

If no match is found, Then set the response string 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

#Learning experience

This example mainly includes the following knowledge points:

Form basics
Onkeyup event: when the keyboard key is released Occurrence
Function call, function value passing
Creation of AJAX XMLHttpRequest object, function executed when the server responds, transfer to the server File sending request: See 1-5 for learning experience
HTML DOM getElementById() method: Returns a reference to the first object with the specified ID
Array assignment method
Get method form submission

Functions related to strings:

strlen()
count()
Strtolower()

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

PHP development basic tutorial 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]