AJAX can be used for interactive communication with a database.
Example Explained - The MySQL Database
The database table we use in the example above 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 |
In the example above, when a user selects a person in the dropdown list above, a function called "showUser()" is executed.
The function is triggered by the onchange event.
Here is the HTML code:
Select a person:
Peter Griffin
Lois Griffin
Joseph Swanson
Glenn Quagmire
Person info will be listed here...
Code explanation:
First, check if person is selected. If no person is selected (str == ""), clear the content of txtHint and exit the function. If a person is selected, do the following:
The page on the server called by the JavaScript above is a PHP file called "getuser.php".
The source code in "getuser.php" runs a query against a MySQL database, and returns the result in an HTML table:
$q = intval($_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 "
";
while($row = mysqli_fetch_array($result)) {
echo "";
echo "";
echo "";
echo "";
echo "";
echo "";
echo "";
}
echo "
Firstname | Lastname | Age | Hometown | Job |
---|---|---|---|---|
" . $row['FirstName'] . " | " . $row['LastName'] . " | " . $row['Age'] . " | " . $row['Hometown'] . " | " . $row['Job'] . " |
";
mysqli_close($con);
?>
Explanation: When the query is sent from the JavaScript to the PHP file, the following happens:
Required fields are marked *
Get all latest content delivered to your email free.