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
– Ghostman, Commented Jul 9, 2013 at 9: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
– str, Commented Jul 9, 2013 at 9:15
No, have a look at this. stackoverflow.com/questions/9436534/… — karmafunk
– karmafunk, Commented Jul 9, 2013 at 9:15
Also, you should remove <html> and <body> from table.php. — Petr R.
– Petr R., Commented Jul 9, 2013 at 9:16

Nil'z · Accepted Answer · 2013-07-09 10:43:02Z

1

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
        }  
    });
});

answered Jul 9, 2013 at 10:43

Nil'z

7,4831 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun Kumar · Accepted Answer · 2013-07-09 09:19:43Z

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>';
?>

myk. · Accepted Answer · 2013-07-09 09:24:26Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related