Ajax and XML of PHP Novice Ajax and XML

Next we use a case to explain in detail:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function showUser(str){
	if (str==""){
		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","3_2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>

<form>
	<select name="users" onchange="showUser(this.value)">
		<option value="">Select a person:</option>
		<option value="1">Peter Griffin</option>
		<option value="2">Lois Griffin</option>
		<option value="3">Glenn Quagmire</option>
		<option value="4">Joseph Swanson</option>
	</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>

Next we create a php file, the code is as follows:

<?php
$q=$_GET["q"];

$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");

$x=$xmlDoc->getElementsByTagName('ARTIST');

for ($i=0; $i<=$x->length-1; $i++)
{
	// 处理元素节点
	if ($x->item($i)->nodeType==1)
	{
		if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
		{
			$y=($x->item($i)->parentNode);
		}
	}
}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++)
{ 
	// 处理元素节点
	if ($cd->item($i)->nodeType==1)
	{
		echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
		echo($cd->item($i)->childNodes->item(0)->nodeValue);
		echo("<br>");
	}
}
?>

When the CD query is sent from JavaScript to the PHP page, it will happen ：

1. PHP creates an XML DOM object

2. Finds names in all <artist> elements that match the data passed by JavaScript

3. Outputs the album information and send back the "txtHint" placeholder

Note: This code needs to be copied to local testing, provided that there is the database table we mentioned in the previous section

Continuing Learning

new file

<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <script> function showUser(str){ if (str==""){ 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","3_2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <select name="users" onchange="showUser(this.value)"> <option value="">Select a person:</option> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Glenn Quagmire</option> <option value="4">Joseph Swanson</option> </select> </form> <br> <div id="txtHint"><b>Person info will be listed here.</b></div> </body> </html>

submit Reset Code

Automatic operation

Ajax and XML of PHP Novice Ajax and XML

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]