Listings
AJAX Database Example
AJAX Database Example.
The following example will demonstrate how a web page can fetch information from a database with AJAX:
xample 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 |
Example Explained
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:
Example
<html> <head> <script> function showUser(str) { if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } else { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xmlhttp.open("GET","family.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">Joseph Swanson</option> <option value="4">Glenn Quagmire</option> </select> </form> <br> <div id="txtHint"><b>Person info will be listed here...</b></div> </body> </html>
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:
- Create an
XMLHttpRequestobject - Create the function to be executed when the server response is ready
- Send the request off to a file on the server
- Notice that a parameter
qis added to the URL (with the content of the dropdown list)
The PHP File
The page on the server called by the JavaScript above is a PHP file called family.php.
The source code in family.php runs a query against a MySQL database, and returns the result in an HTML table:
family.php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123');
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>
<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 the query is sent from the JavaScript to the PHP file, the following happens:
- PHP opens a connection to a MySQL server
- The correct person is found
- An HTML table is created, filled with data, and sent back to the
txtHintplaceholder
Views: 8,036 / Downloads: 556 | Price: $0 | Ajax / Ajax PHP
Status: Active
|
You have no Listings. Create Listing.
Price: $3,500 
Free Tools
- Submit Software/Code
Sitemap Generator-
NameServer Lookup (NS) -
( SERP )Search Engine Ranking Position checker 
PHP Form Generator
Generate custom email forms.-
Domain (WHOIS) Lookup Check all domain information, exp date, owner,address. 
Meta Tags Generator Generate All meta tags and get ranked high on Search engines.. 
CPM Advertising Calculator Calculate and estimate your CPM / CPA / CPC.. 
CSS 3 Color Chart View all Known Colors and Their Css Atribute. Ex. #0099FF
FavIcon Generator Generate your own Favicon in seconds. Then Just Place the image.
Table Generator Generate
Tables just clicking the buttons
+ its Copy and Paste.
Dev's Tips
Dev: Ramon Sanchez
TIP: # 251 | Meta Tags
When addingMETA TAGSmake sure you dont over Repeat thekeywordsit wont help with SEO. Keep it Simple dont overdue it...
Contact Developer
Website Ranking Tools
Help you analyze and improve your Website rankings!
Google Rank Checker Check website Google rank.- Website search engine position
Check website position on search. - Search Engine Optimization Tools - Check how search engines see your Website !
- Search Engine Listing Preview Preview what your site's listing will look like.
- Website Resolution Viewer - View your website at a variety of common resolutions.
- Text Website Viewer
View your website in text-only mode, just as the search engines see it. - XHTML Website Source Tools - Check how search engines see's and affect your Website !
Source Code Viewer
View the source code of a website.- MD5 Encrypter
Encrypt text with MD5 encoding. - HTML Encrypter Encrypt your HTML code to hide it from visitors.
- Website Speed Test Check the loading speed of your site.
- Website owner Lookup See the Domain information and who is it registered to.
- Optimize Html Code Optimize your HTML Source code.
- Other Misc Website Tools - Check how search engines see and affect your Website.
- Website Status analyzer Analyze whether all the five major ports are responding back.
- TXT List Cleaner Clean and remove duplicates from a text list.
Javascript Hit Counter Copy and paste Javascript code to your website and create a web counter.
Browser Details Tool - View your IP address and your browser details.- Send Anonymous Email's.Allows the sending of anonymous e-mails.
- E-mail Image Generator Create an image of your e-mail address to prevent harvesting.