PHP + jquery real-time display of online website users

Source: Internet
Author: User
This article mainly introduces PHP + jquery's method of displaying the number of online users in real time, and analyzes in detail the principle and code implementation skills of displaying the number of online users in real time, which has some reference value, for more information, see

This article mainly introduces PHP + jquery's method of displaying the number of online users in real time, and analyzes in detail the principle and code implementation skills of displaying the number of online users in real time, which has some reference value, for more information, see

This example describes how to display the number of online users of a website in PHP + jquery in real time. Share it with you for your reference. The specific analysis is as follows:

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

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. Here we will introduce the use of jQuery and PHP in combination with examples to achieve dynamic digital display.

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:

The Code is as follows:

Currently online:

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:

[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 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.

The Code is as follows:

Function update (){
$. GetJSON ("number. php? Jsonp =? ", Function (data ){
Magic_number (data. n );
});
};

SetInterval (update, 5000); // execute once in 5 seconds
Update ();


PHP code:
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:

The 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.

I hope this article will help you with php programming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.