jQuery ajax and php to fetch data from a mysql database
Posted by navaneeth on Sep 21, 2012 in Jquery, Php | 9 Comments
In this post we are discussing on ajax and php to fetch data from a mysql database. The main application is that using ajax we can update a page’s content without reloading the page. In order to do that we have to create a php script called example.php.
And here is the sample for example.php
<?php $result = mysql_query("SELECT * FROM $tableName"); //query $array = mysql_fetch_row($result); //fetch result echo json_encode($array); ?>
Next is to create a html script called client.php in the same directory with the following content in it
<html> <head> <script language="javascript" type="text/javascript" src="jquery.js"></script> </head> <body> <h3>Output: </h3> <div id="output">this element will be accessed by jquery and this text replaced</div> <script id="source" language="javascript" type="text/javascript"> $(function () { $.ajax({ url: 'example.php', //the script to call to get data data: "", //you can insert url argumnets here to pass to api.php //for example "id=5&parent=6" dataType: 'json', //data format success: function(data) //on recieve of reply { var id = data[0]; //get id var vname = data[1]; //get name $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html } }); }); </script> </body> </html>
Just load the page and thats it! a basic example for using jquery ajax and php for fetching data from a database.
Also we can do it when and events is triggered like form,mouse events etc..
an example on mouseover is shown below
$('#button').mouseover(function() { $.ajax({ url: 'example.php', //the script to call to get data data: "", //you can insert url argumnets here to pass to api.php //for example "id=5&parent=6" dataType: 'json', //data format success: function(data) //on recieve of reply { var id = data[0]; //get id var vname = data[1]; //get name $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html } }); });
Hope this will help you understand ajax and php to fetch data from a mysql database
9 Comments on “jQuery ajax and php to fetch data from a mysql database”
hups
February 11, 2013please kan you show me with mouseout and mouseover
navi
February 12, 2013$(‘#button’).mouseover(function() {
$.ajax({
url: ‘example.php’, //the script to call to get data
data: “”, //you can insert url argumnets here to pass to api.php
//for example “id=5&parent=6”
dataType: ‘json’, //data format
success: function(data) //on recieve of reply
{
var id = data[0]; //get id
var vname = data[1]; //get name
$(‘#output’).html(“id: “+id+” name: “+vname); //Set output element html
}
});
});
just change the mouseover to mouseout…..
And tell me if its help you
hari
August 22, 2015hi guys pls anyone sent me insert delete update delete coding using ajax in php pls send me the coding to my mail mcasns@gmail.com
navaneeth
September 10, 2015You can change the code in the example.php file and can pass the arguments using the data string in the jquery code
Franco
August 7, 2016Morning,
I have a problem witn my program with onmouseover and I want to know if you can help me.
Best Regards
Franco
navaneeth
August 8, 2016yes, can you email me the full code you used?
Grace
April 23, 2018Can you show me how to ouput this in a tablle?
S S
September 28, 2019with same logic can we get the value in text box directly….kindly confirm
navaneeth
July 23, 2020Yes