javascript - Reading from a MYSQL table every 5 seconds and dynamically displaying results on a PHP page without refreshing - St

admin管理员组

文章数量:1279021

I'm looking to display data from a table in a mysql database using PHP, however, I want the data to automatically update itself and retrieve current values every 5 seconds.. WITHOUT having to refresh the page. Is this possible? Maybe with JQuery/ AJAX? If so, please explain how it can be done / point me to a resource where I can find such information

Thanks

I'm looking to display data from a table in a mysql database using PHP, however, I want the data to automatically update itself and retrieve current values every 5 seconds.. WITHOUT having to refresh the page. Is this possible? Maybe with JQuery/ AJAX? If so, please explain how it can be done / point me to a resource where I can find such information

Thanks

• php
• javascript
• jquery
• mysql
• ajax

Share Improve this question Follow asked Jun 24, 2011 at 18:18 normanramnormanram 2111 gold badge11 silver badge55 bronze badges 8

• Yes, you can easy implement it with JQuery/ AJAX – Cyril Deba Commented Jun 24, 2011 at 18:20
• @normanram are you trying to do instant messaging from a database? – dqhendricks Commented Jun 24, 2011 at 18:21
• Yes, just send request to your php script every 5 seconds using jquery. – AR. Commented Jun 24, 2011 at 18:22
• api.jquery./jQuery.ajax api.jquery./jQuery.get – AR. Commented Jun 24, 2011 at 18:23
• @dqhendricks, no, i'm making a dashboard where the data must be (as close as possible to) real time – normanram Commented Jun 24, 2011 at 18:24

 |  Show 3 more ments

6 Answers 6

Sorted by: Reset to default 3

If you use window.setInterval() and jQuery's .load() you should be able to do what you want. The PHP script should return the HTML that needs to replace the previous one.

Javascript:

function refreshData()
{
  // Load the content of "path/to/script.php" into an element with ID "#container".
  $('#container').load('path/to/script.php');
}

// Execute every 5 seconds
window.setInterval(refreshData, 5000);

A really basic example:

  function poll(){
       $.ajax({
           type: "GET", 
           url: "your/php/script/",
           success: function(data){
              // do something with data
           }

       });
   };
   setInterval(poll, 5000);

jQuery is a good option. Here are the docs for ajax.

You will want to make this call with setInterval

Something like this might get your started.

setIntervla(updateFromDb,5000);

function updateFromDb(){
   $.ajax({
      url: "getUpdates.php",
     success: function(){
     $(this).addClass("done");
     }
   });
};

What you are describing is exactly the type of the AJAX is used for, AJAX allows for asynchronous requests to be made to your server.

For learning I would suggest using a framework like Jquery and look into the AJAX api.

Basicly you will need a PHP script that query the database and responds the results the way you want them. A suggestion would be to JSON encode them.

In JavaScript on the client you will need to you things like:

var poll = setInterval(function(){
   $.ajax({
     type:"GET",
     url: "yourpage.php",
     success: function(data){
        //HANDLE DATA
        // use JSON.parse(data); if your JSON encoding your data  
    }
   });
},5000)

Just go to the documentation of jQuery:

http://api.jquery./category/ajax/

Use the mand "jQuery.get()" or better "jQuery.getJson()" to make a http request to the server. Use JSON to get a better munication between server and client. Return from server side a json string and convert this on the client to an javascript object. (the function jQuery.getJson already do this for you) so you can easily access the key and values in the data array.

Just an example:

SERVER Part with PHP:

<?

$data = array('key'=>'value');
return json_encode($data, true);

CLIENT Part:

$.getJSON('myurl.php', function(data) {
    // THIS ONE IS CALLED with your PHP data
    alert(data.key);
});

$(function(){
window.setInterval(function(){
    $.post("filename.php",{'field1':field1,'field2':field2,'field3':field3},function(data){
    //callbackfunction(data)
})
},30000);//millisecs

});

And have your php file do all your sql

本文标签：