AJAX can be used for interactive communication with a database.

The following example will demonstrate how a web page can fetch information from a database with AJAX:

Example:

The database table we use in the example above looks like this:

Using AJAX with Database in PHP

In this example, I will show you how a web page can fetch information from a database by using, selecting user name from user list.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>AJAX with Database</title>
        <script type="text/javascript">
 
            function getUserDetails(str) {
                if (str== "") {
                    document.getElementById("userDetails").innerHTML= "";
                    return;
                }
                if (window.XMLHttpRequest) {
                    xmlHttp=newXMLHttpRequest();
                }
                xmlHttp.onreadystatechange=function () {
                    if (xmlHttp.readyState==4) {
 
                        document.getElementById("userDetails").innerHTML= xmlHttp.responseText;
                    }
                }
                xmlHttp.open("GET", "DatabaseAjax.php?drdnVal="+str, true);
                xmlHttp.send();
            }
    </script>
    </head>
    <body>
      
        <p style="background-color: gold; width: 200px">Select User Name :</p>
           <form>
               <select id ="usrName" onchange="getUserDetails(this.value)" >
                     <option value=""> Select User Name </option>
                    <option value="Arun"> Arun </option>
                    <option value="Amit"> Amit </option>
                    <option value="Vineet"> Vineet</option>
                    <option value="Akki"> Akki</option>
                    <option value="Ray"> Ray</option>
                </select>
            </form>
        <div id="userDetails">
            <p> <b> User Details:</b></p> 
        </div>
    </body>
</html>


Using AJAX with Database in PHP

Now select any user name from user list, when you select any user name then ‘DatabaseAjax.php’ will be called.

‘DatabaseAjax.php’ code:
<?php
        // Get dropdown value from url
        $val =$_GET["drdnVal"];
 
        // create connection with database
        $con = mysql_connect("localhost", "root", "root");
        // Check connection successfully created or no
        if(!$con)
        {
            // display error message when connection creation failed
            die ("<b>Error : ". mysql_error());
        }
        // select database name
        mysql_select_db("tempdatabase",$con);
        //select record from table
        $qry = "Select * from tempdatabase.tbltemp where username = '".$val."'";
        // query result
        $qryResult = mysql_query($qry,$con);
        //print table structure
        echo "<table border='1px solid balck'>
            <tr>
            <th> Id </th>
            <th> UserName </th>
            <th> EmailId </th>
            <th> Address </th>
            <th> Mobile No </th>
            </tr>
   
            ";
 
        // Display data in table column
        while ($rowData = mysql_fetch_array($qryResult))
        {
            echo "<tr>";
            echo "<td>".$rowData['Id']."</td>";
            echo "<td>".$rowData['Username']."</td>";
            echo "<td>".$rowData['EmailId']."</td>";
            echo "<td>".$rowData['Address']."</td>";
            echo "<td>".$rowData['MobileNo']."</td>";
            echo "</tr>";
        }
        // close table tag
        echo "</table>" ;
 
        // close the connection
        mysql_close($con);
 
?>
Output:

Using AJAX with Database in PHP

Select any one user name user list; here I am selecting ‘Arun’

Using AJAX with Database in PHP


Leave Comment