PHP+jquery method to display the number of people online on the website in real time, jquery online number

PHP+jquery method to display the number of people online on the website in real time, jquery online number_PHP tutorial

WBOY

Release： 2016-07-13 10:10:11

Original

775 people have browsed it

PHP+jquery method to display the number of online people on the website in real time, jquery online number

The example in this article describes the method of PHP+jquery to display the number of people online on the website in real time. Share it with everyone for your reference. The specific analysis is as follows:

The simplest way to display the number of online users is to directly use js to call php, which can display how many people have visited the site. If you want to display the number of online users in real time without refreshing the page, we can use jquery ajax to achieve this.

We need to dynamically display data in some applications, such as the current number of people online, the current total transaction amount, the current exchange rate, etc. The front-end page needs to be refreshed in real time to obtain the latest data. Here we will introduce you to the use of jQuery and PHP to achieve dynamic digital display effects with examples.

This example assumes that the number of current online users is to be dynamically displayed on the page (without refreshing the entire page, only partially refreshing dynamic numbers), which is commonly used on some statistical platforms. Just define the following structure in the HTML page:

Copy code The code is as follows:

Currently online:< ;/span>

First we need to define an animation process, using jQuery's animate() function to realize the transformation process from one number to another. The following magic_number() custom function integrates the code as follows:

[code]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 the background number.php. After getting the PHP response, it calls magic_number() to display the latest number. In order to see better results, we use setInterval() to set the interval between code execution.

Copy code The code is as follows:

function update() {
$.getJSON("number.php?jsonp=?", function(data) {
magic_number(data.n);
});
};

setInterval(update, 5000); //Execute once every 5 seconds
update();

PHP code part:
In the actual project, 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 finally returns them to the front-end js in json format. The number.php code is as follows:

Copy code The code is as follows:

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

The principle is actually very simple. It uses js settimeout to load a php file in a few seconds to achieve the function of displaying the number of people online in real time.

I hope this article will be helpful to everyone’s PHP programming design.