jQuery, JSON, PHP, Simple Example For Read Data From table Database

April 13, 2011 by 5 Comments

DEMO | DOWNLOAD

I have created a simple php program based on json and JQuery. It can be used for retrieving data from server side database or some other form of data. This something like AJAX but one different is that, in Ajax X stand for XML, but here i am using JSON.

General Steps.
1)    User click to receive the server side data.
2)    JavaScript invoke PHP file and send with some argument
3)    The PHP File receives the argument and return the result as response.
4)    JavaScript receive the response and Parse in the format of HTML as you require

Here i have created two examples. I want retrieve the student information from database. One example shows all the details of the student and also shows particular student information based on your selections.

Code Snip1
Link  two javascript files in the header of json.html

<script type="text/javascript" src="jquery.js">
</script><script type="text/javascript" src="json.js">
</script>

Code Snip2

<h2>Example 1</h2>
<table align="center">
<tbody>
<tr>
<td>
<select name="stud_sel">
    <option value="100">Ranju</option>
    <option value="101">Manaz</option>
    <option value="102">Ashok</option>
   <option value="103">Pav</option>
</select>
</td>
</tr>
</tbody>
</table>
<!--HERE WRITE THE RESPONSE DATA -->
<h2>Example 2</h2>
<table align="center">
<tbody>
<tr>
<td><input onclick="getAllDetails()" type="button" name="bt" value="All Details" /></td>
</tr>
</tbody>
</table>
<!---END-->

Code Snip3
The Server Data to retrieve the information from database

$stud_id = $_GET["id"];
$qr = "SELECT * FROM student_details WHERE id = $stud_id";
$res= mysql_query($qr);
$row = mysql_fetch_array($res);
$stud_arr["full_name"] = $row["full_name"];
$stud_arr["reg_no"] = $row["regno"];
$stud_arr["address"] = $row["address"];
$stud_arr["mark1"] = $row["mark1"];
$stud_arr["mark2"]= $row["mark2"];
$stud_arr["mark2"] = $row["mark3"];

Code Snip4
Creating Header and encoding the result array into json format.

header('Content-type: application/json');
echo json_encode($stud_arr);

Code Snip5
When selecting particular student it invoke the javascript method getDetails(id),The Json response is written to the table “myTable”

function getDetails(id)
{
var myTable  = "" ;
myTable     += "" ;
var id_val = id.value;
var url = "json.php?id="+id_val;
$.getJSON(url, function(json) 
{
     var select = $('#city-list');
     $.each(json, function(k, v) 
                {
                  myTable +=   "";
                });
	$("#stud_tbl").html(myTable) ;
        });
}

Code Snip6
When clicking button,  it invoke the JavaScript method getAllDetails (),  The Json response is written to the table id “myTable”.This example shows,  when response contain multiple data rows. So it require iteration for displaying all the data.

function getDetails(id)
{
var myTable = "" ;
myTable += "";
var id_val = id.value;
var url = "json.php?id="+id_val;
  $.getJSON(url, function(json) {
                var select = $('#city-list');
                $.each(json, function(k, v) {
                  myTable +=   "";
                });
	$("#stud_tbl").html(myTable) ;
        });
}

Steps to execute the program
1) Download the source files
2)Create database student
3)Impor the sql file from the folder “DB”
4)Run the program.

DEMO | DOWNLOAD

Filed Under: PHP Code Example, Tips And Tricks Tagged With: ,

Comments

  1. muraleedharan says:
    January 24, 2013 at 2:40 am

    I appreciate your work
    Keep this mind help to others

    Reply
  2. dhivya says:
    February 8, 2013 at 6:22 am

    hai abdul,

    your work is really appreciable, can u tell that how to get a single value from jquery to php..really i dono about JSON or anything.. please help me as soon as possible..:(

    Reply
  3. glenn manuel says:
    February 27, 2013 at 6:27 am

    Great day sir!

    I appreciate your work.

    I have a problem to my side.
    You use the dropdown to display the details.
    For me I want that the drop down become a textbox.

    here is the flow/code:

    Picture:http://i.imgur.com/yQAErOk.jpg
    let say that: i have a 2 textbox as you see the image..
    ORDER NUMBER 1.
    ORDER NAME 2.

    Ive already finished the 2 case but the 3rd case not yet done kindly help me please
    case 1: If the order number is empty says “this field is required”.
    case 2: If you enter invalid order number says “This order number does not exists”.

    case 3: When If you enter valid order number automatically display order name in the textbox ORDER NAME without clicking a button..

    thanks.

    Reply
    • admin says:
      February 27, 2013 at 7:00 am

      This topic is not related to this post, i think, your problem is simple, use javascript inline and ajax for server side validation. i can send your the detail if you email me to abdulamjeedpk (at) gmail (dot) com

      Reply

Speak Your Mind

*