PHP and jquery show the number of online users in real time.

PHP and jquery show the number of online users in real time.

We need to dynamically display data in some applications, such as the current number of online users, the current transaction amount, and the current exchange rate. The front-end page needs to refresh and obtain the latest data in real time. This article introduces how to use jQuery and PHP to Display Dynamic numbers.

This example assumes that the current number of online users needs to be dynamically displayed on the page (the entire page does not need to be refreshed, but dynamic numbers are only refreshed locally), which is usually applied on some statistical platforms. On the HTML page, you only need to define the following structure:

<Div class = "count"> online: <span id = "number"> </span> </div>

First, we need to define an animation process, and use the animate () function of jQuery to transform from one number to another. The following magic_number () custom function integrates the Code as follows:

function magic_number(value) {   var num = $("#number");   num.animate({count: value}, {     duration: 500,     step: function() {       num.text(String(parseInt(this.count)));     }   }); };

Then, the update () function uses jQuery's $. getJSON () to send an ajax request to number. php In the background. After obtaining the corresponding PHP request, it calls magic_number () to display the latest number. To see better results, we use setInterval () to set the interval between code execution.

Function update () {$. getJSON ("number. php? Jsonp =? ", Function (data) {magic_number (data. n) ;}; setInterval (update, 5000); // execute an update () in 5 seconds ();

PHP Section

In actual projects, we will use PHP to obtain the latest data in the database and then return it to the front-end through PHP. For better demonstration, this example uses random numbers and returns them to the front-end js in json format. The number. php code is as follows:

$total_data = array(   'n' => rand(0,999) );   echo $_GET['jsonp'].'('. json_encode($total_data) . ')';

In fact, the principle is very simple, that is, using js settimeout to load a PHP file in seconds to display the number of online users in real time.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!