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>
3 answers
solution1
1 2013-07-09 10:43:02
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
}
});
});
solution2
0 2013-07-09 09:19:43
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>';
?>
solution3
0 2013-07-09 09:24:26
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.