Fetch Record From Database using jQuery and PHP

You have seen how we can Insert record into database using jQuery. It really reduces the amount of data transferred to server and saves page loading time. Today I will show you how you can fetch data from database using jQuery and PHP and display the data in your page.

Check  LIVE DEMO here.

Note: For Privacy and safety it only fetches latest entered record from database. So if you want to see your entered data then please enter your data from HERE.

In this tutorial we will use our old database ‘school’ with the table ‘class’ having three columns id, name and password. We have two files here one ‘index.php’ which contains jQuery code and another ‘fetch.php’ which will get data from database corresponding to particular ID passed by ‘index.php’.

Here is our code for index.php:

<?php
$connection = mysql_connect('localhost', 'root', '12345');
$db = mysql_select_db('school', $connection);
?>
<html>
<head>
<title>Fetch record using jQuery</title>
<style type="text/css">
#display {
margin : 225px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$('document').ready(function(){

$('a').click(function(){
var temp = $('a').attr('myval');
$.post('fetch.php', {id:temp}, function(data){
$('#display').html(data);
});
});
});
</script>
</head>
<body>
<?php
$query = mysql_query("select * from class order by id desc LIMIT 1", $connection);
echo "<ul>";
while($row = mysql_fetch_assoc($query)){
echo "<li><a href=\"javascript:return(0)\" myval=\"{$row['id']}\"><h3>{$row['name']}</h3></a></li>";

}

echo "</ul>";

?>
<div id="display"></div>
</body>
</html>
<?php
mysql_close($connection);
?>

Above code will take ‘ID’ value of the latest entered record and will pass it to fetch.php.

Code for fetch.php:

<?php
$connection = mysql_connect('localhost', 'root', '12345');
$db = mysql_select_db('school', $connection);
$x = $_POST['id'];
$safex = mysql_real_escape_string($x);
$query = mysql_query("select * from class where id=$safex", $connection);

$result = "";

$result .= "<div id='display'>";
$result .="<table border=\"1\">";
$result .="<tr><th>Name</th><th>Password(encrypted)</th></tr>";
while($row = mysql_fetch_assoc($query)){
$result .= "<tr><td> {$row['name']}</td>"."<td> {$row['password']}</td></tr></p>";
}
$result .="</table>";

$result .= "</div>";
echo $result;

?>

You can use this code for your web projects. Comment below or email me to get the script directly in your inbox. Emailed script will be commented so that you can easily interpret whats going on with each line of code.

Conclusion:

You should use jQuery and use its power to do your job easily and faster. Share the article to help others.

11 thoughts on “Fetch Record From Database using jQuery and PHP”

  1. Pingback: Delete Records From Database Using jQuery - InfoTuts

  2. please help me to get data from database using ajax/jquery on oclick in codeigniter

    same application but in codeigniter

    thanks

  3. Sir,

    i am building a quiz using PHP. I have the questions in a table in a database, along with options and correct answer, and I need to retrieve the data one question at a time. But I am unable to do that, as all my questions come up on the same page all at once. Could you email me some help or code for this?

    1. Hi Apoorv,

      If you want to display one record/question at a time then you will need to use pagination LOGIC in your code OR edit your sql query to select the first record/question from the table and on navigating to next question select second top of the table. I would like to know if you are displaying random quiz questions from table or you want them in same sequence as in table.

      1. Sir,
        I have to begin the quiz in sequential order. I am an intern at a website, and when we finally launch the website, we will print questions at random.

        1. Me too sir.. Same problem . Same scenario as well .. Can you please email me some sample script. thanks

  4. I need a help on how to create a tables that contains quiz questions with their options and correct answers, so that the front end fetches it questions from the table.

  5. Hi,
    I am making an app which will display songs from the database. i have used buttons on the front end which when clicked will display the number of the song that has been clicked. I am having a problem gettting the right code to display the data. I have around 200 buttons and each is matched to a song number in the database.The user should simply click on the button e.g 50 and the song contents is displayed

  6. hi,
    I need a help. if i retrieves more data from database and click on a particular link it displays first row output alone. I tried out the above code but it works for 1 row. plz help me urgent.

  7. Sir in my project I have checkboxes in my page which when checked should display the respective row(s) from the database. How do I do this?
    Please help and thank you in advance.

  8. I have created a database called ABC which has two tables one table name is category and another table is product

    Category has 2 fileds ID and cname ( example ID – 1 , cname – shoes)

    Products has 2 fields cpath, cImage ( example i have 2 records –

    cpath: accesories>shoes>nike , Image : http://google.com.i.jpg )
    cpath: luxury>shoes>rebok, Image : http://google.com.i.jpg )

    We can fetch data of category using simple query — I get results as
    1 and shoes

    ( but here once I click on shoes from front end, it has to check cpath of the product table if this word exist if exist it has to output data of that particular row) Can you please give me an idea how can it be done.

Comments are closed.