Php+jquery real-time display of the number of online site _php tutorial

Source: Internet
Author: User

Php+jquery real-time display of online site numbers


This article mainly introduces the Php+jquery real-time display website online number of methods, more detailed analysis of the real-time display online number of principles and code implementation skills, with a certain reference value, the need for friends can refer to the next

This paper describes the method of Php+jquery real-time display of the number of online website. Share to everyone for your reference. The specific analysis is as follows:

Online number of the simplest is the direct use of JS call PHP, so that can show how many people visited the site, if the user does not refresh the status of the page in real-time display users online, we can use jquery Ajax to achieve.

We need to dynamically display data in some applications, such as the current number of people online, current transaction totals, current exchange rates and so on, front-end pages need real-time refresh to get the latest data. Here we will combine examples to introduce the use of jquery and PHP to achieve dynamic digital display results.

This example assumes that the current number of online users is being displayed dynamically on the page (without having to refresh the entire page, just locally refreshing the dynamic number), and is commonly used on some statistical platforms. In an HTML page, you simply define the following structure:

The code is as follows:

Currently Online:

First we define an animation process that uses the animate () function of jquery to transform the process from one number to another, and the following magic_number () custom functions integrate 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)));
}
});
};


The update () function then uses jquery's $.getjson () to send an AJAX request to the background number.php, which, after getting PHP, calls Magic_number () to show the latest numbers. In order to see better results, we use setinterval () to set the time interval for code execution.

The code is as follows:

function Update () {
$.getjson ("number.php?jsonp=?", function (data) {
Magic_number (DATA.N);
});
};

SetInterval (update, 5000); 5 Seconds to execute once
Update ();


PHP Code section:
In the actual project, we will use PHP to get the latest data from the database and then return it to the front end via PHP. For a better demonstration, this example uses random numbers and finally returns the js,number.php code to the front end in JSON format as follows:

Copy the code code as follows:

$total _data = Array (
' N ' = rand (0,999)
);
echo $_get[' Jsonp ']. ' ('. Json_encode ($total _data). ')';


The principle is actually very simple is the use of JS settimeout implementation of a few seconds to load a PHP file to achieve real-time display online number of functions.

I hope this article is helpful to everyone's PHP programming.

http://www.bkjia.com/PHPjc/975898.html www.bkjia.com true http://www.bkjia.com/PHPjc/975898.html techarticle Php+jquery Real-time display of Web site number of people online this article mainly introduces the method of Php+jquery real-time display website online number, and analyzes the principle of real-time display online number in detail.

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