PHP instances AJAX and MySQL

May 11, 2021 PHP

3. Instance Interpretation - MySQL database

PHP - AJAX and MySQL

In PHP, AJAX can be used to communicate interactively with a database. This section describes this interactive communication.

AJAX database instance

The following example shows how a Web page can read information from a database through AJAX:

Person info will be listed here...

Instance Interpretation - MySQL database

In the example above, the database table we are using looks like this:

id	FirstName	LastName	Age	Hometown	Job
1	Peter	Griffin	41	Quahog	Brewery
2	Lois	Griffin	40	Newport	Piano Teacher
3	Joseph	Swanson	39	Quahog	Police Officer
4	Glenn	Quagmire	41	Quahog	Pilot

Instance Interpretation - HTML page

When a user selects a user in the drop-down list above, a function named "showUser()" is executed. The function is triggered by the "onchange" event:

<html>
 <head>
 <script>
 function showUser(str)
 {
 if (str=="")
 {
 document.getElementById("txtHint").innerHTML="";
 return;
 } 
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for 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","getuser.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>

The showUser() function performs the following steps:

Check to see if a user is selected
Create an XMLHttpRequest object
Create a function that executes when the server response is ready
Send a request to a file on the server
Note the parameters (q) added to the end of the URL (containing the contents of the pull-down list)

PHP file

The server page called by JavaScript above is a PHP file .php "getuser".

The source code .php "getuser" runs a query for the MySQL database and returns the results in the HTML table:

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

 $con = mysqli_connect('localhost','peter','abc123','my_db');
 if (!$con)
 {
 die('Could not connect: ' . mysqli_error($con));
 }

 mysqli_select_db($con,"ajax_demo");
 $sql="SELECT * FROM user WHERE id = '".$q."'";

 $result = mysqli_query($con,$sql);

 echo "<table border='1'>
 <tr>
 <th>Firstname</th>
 <th>Lastname</th>
 <th>Age</th>
 <th>Hometown</th>
 <th>Job</th>
 </tr>";

 while($row = mysqli_fetch_array($result))
 {
 echo "<tr>";
 echo "<td>" . $row['FirstName'] . "</td>";
 echo "<td>" . $row['LastName'] . "</td>";
 echo "<td>" . $row['Age'] . "</td>";
 echo "<td>" . $row['Hometown'] . "</td>";
 echo "<td>" . $row['Job'] . "</td>";
 echo "</tr>";
 }
 echo "</table>";

 mysqli_close($con);
 ?>

Explanation: When a query is sent from JavaScript to a PHP file, it occurs:

PHP opens a connection to the MySQL database
The selected user was found
Create an HTML table, populate the data, and send back the "txtHint" placeholder