Using Jquery Ajax to retrieve data from Mysql
For retrieving data using Ajax + jQuery, you should write the following code:
<html> <script type="text/javascript" src="jquery-1.3.2.js"> </script> <script type="text/javascript"> $(document).ready(function() { $("#display").click(function() { $.ajax({ //create an ajax request to display.php type: "GET", url: "display.php", dataType: "html", //expect html to be returned success: function(response){ $("#responsecontainer").html(response); //alert(response); } });});});</script><body><h3 align="center">Manage Student Details</h3><table border="1" align="center"> <tr> <td> <input type="button" id="display" value="Display All Data" /> </td> </tr></table><div id="responsecontainer" align="center"></div></body></html>For mysqli connection, write this:
<?php $con=mysqli_connect("localhost","root",""); For displaying the data from database, you should write this :
<?phpinclude("connection.php");mysqli_select_db("samples",$con);$result=mysqli_query("select * from student",$con);echo "<table border='1' ><tr><td align=center> <b>Roll No</b></td><td align=center><b>Name</b></td><td align=center><b>Address</b></td><td align=center><b>Stream</b></td></td><td align=center><b>Status</b></td>";while($data = mysqli_fetch_row($result)){ echo "<tr>"; echo "<td align=center>$data[0]</td>"; echo "<td align=center>$data[1]</td>"; echo "<td align=center>$data[2]</td>"; echo "<td align=center>$data[3]</td>"; echo "<td align=center>$data[4]</td>"; echo "</tr>";}echo "</table>";?>
You can't return ajax return value. You stored global variable store your return values after return.
Or Change ur code like this one.
AjaxGet = function (url) { var result = $.ajax({ type: "POST", url: url, param: '{}', contentType: "application/json; charset=utf-8", dataType: "json", async: false, success: function (data) { // nothing needed here } }) .responseText ; return result;}
Please make sure your $row[1] , $row[2] contains correct value, we do assume here that 1 = Name , and 2 here is your Address field ?
Assuming you have correctly fetched your records from your Records.php, You can do something like this:
$(document).ready(function(){ $('#getRecords').click(function() { var response = ''; $.ajax({ type: 'POST', url: "Records.php", async: false, success : function(text){ $('#table1').html(text); } }); });}In your HTML
<table id="table1"> //Let jQuery AJAX Change This Text </table><button id='getRecords'>Get Records</button>A little note:
Try learing PDO http://php.net/manual/en/class.pdo.php since mysql_* functions are no longer encouraged..