How to show a html table with data from database using ajax?

Question

Im a newbie in web development and I really need some help.I want to show a html table using ajax. This codes are from two different files. Am i doing this right??

here is my index.html

<html>
    <body>

<script>
function loadXMLDoc()
{
    var xmlhttp;
    xmlhttp=new XMLHttpRequest();

    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","table.php",true);
    xmlhttp.send();
}
</script>

        <form action = "insert.php" method="post">

        Firstname: <input type="text" name="firstname"></br>
        Lastname: <input type="text" name="lastname"></br>
        Middlename: <input type="text" name="middlename"></br>

        <input type="submit" onclick="loadXMLDoc()">


        </form>
        <div id="myDiv"></div>

    </body>
</html>

here is my table.php. When i click the submit button nothing happens. Is there someone who can tell me if Im doing this right??

<html>
    <body>
        <table border = 1>
            <tr>
                <th>FIRSTNAME</th>
                <th>LASTNAME</th>
                <th>MIDDLENAME</th>
                <th>DELETE</th>
            </tr>



    /*  <?php
                $con = mysqli_connect("localhost","root","","study");

                if (mysqli_connect_errno($con))
                    {
                        echo "Failed to connect to mysql" . mysqli_connect_error();
                    }

                    $result = mysqli_query($con,"SELECT * FROM sample_employers");

                    while($row=mysqli_fetch_array($result))
                    {
                        echo "<tr>";
                        echo "<td>" . $row['firstname'] . "</td>";
                        echo "<td>" . $row['lastname'] . "</td>";
                        echo "<td>" . $row['middlename'] . "</td>";
                        echo "<td> <input type='button' value='Delete' </td>"; 
                        echo "</tr>";
                    }

                    mysqli_close($con);
            ?>

        </table>
        </body>
</html>

you can rather use json and jquery and load a temporary page to the html div — Ghostman, Jul 09 '13 at 09:14
When it works, you were doing it right. Otherwise you didn't. If you want to know something specifically, you have to ask specifically. — str, Jul 09 '13 at 09:15
No, have a look at this. http://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get — karmafunk, Jul 09 '13 at 09:15

score 1 · Answer 1 · answered Jul 09 '13 at 10:43

Firstly open the ajax page directly in your browser, this is the best method to find out the ajax response you will be getting. Secondly, Update your ajax code as:

$(function(){
    $.ajax({
        url     : 'table.php',
        data    : {},
        type    : 'GET',
        success : function(resp){
            $("#myDiv").html(resp);
        },
        error   : function(resp){
            //alert(JSON.stringify(resp));  open it to alert the error if you want
        }  
    });
});

score 0 · Answer 2 · answered Jul 09 '13 at 09:19

try this code table.php

<?php

$con = mysqli_connect("localhost","root","","study");

if (mysqli_connect_errno($con))
    {
        echo "Failed to connect to mysql" . mysqli_connect_error();
    }
        echo '<table border = 1>';
        echo '<tr>';
            echo ' <th>FIRSTNAME</th>';
            echo '<th>LASTNAME</th>';
            echo ' <th>MIDDLENAME</th>';
            echo ' <th>DELETE</th>';
        echo ' </tr>';
    $result = mysqli_query($con,"SELECT * FROM sample_employers");
    while($row=mysqli_fetch_array($result))
    {
        echo "<tr>";
        echo "<td>" . $row['firstname'] . "</td>";
        echo "<td>" . $row['lastname'] . "</td>";
        echo "<td>" . $row['middlename'] . "</td>";
        echo "<td> <input type='button' value='Delete' </td>"; 
        echo "</tr>";
    }
    mysqli_close($con);
    echo '</table>';
?>

score 0 · Answer 3 · answered Jul 09 '13 at 09:24

there is something called client side scripting(with javascript) and server side language(with php in ths case)

You can have an AJAX call that will call your table.php and will get the response.

So all you have to do his code a ajax method in index.html.

like you have coded above
by jQuery reference of ajax http://www.w3schools.com/jquery/ajax_post.asp(tutorial)

jquery is a widely used library of javascript and surely you will find it interesting.

So i suggest to have two seperate files

index.html that will have ajax method to call table.php
table.php that will execute on ajax call and will return it the desired results

then its up to you how to display the results once you get.

How to show a html table with data from database using ajax?

3 Answers3