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

  1. hups
    February 11, 2013

    please 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

  2. hari
    August 22, 2015

    hi 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, 2015

      You can change the code in the example.php file and can pass the arguments using the data string in the jquery code

  3. Franco
    August 7, 2016

    Morning,
    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, 2016

      yes, can you email me the full code you used?

  4. Grace
    April 23, 2018

    Can you show me how to ouput this in a tablle?

  5. S S
    September 28, 2019

    with same logic can we get the value in text box directly….kindly confirm

    • navaneeth
      July 23, 2020

      Yes

Leave a Reply

Your email address will not be published. Required fields are marked *