在HTML元素中显示POST数据

Question

I need some example to display POST data inside HTML DIV element. Like this: Beeceptor

I make an example using PHP and jQuery.

It works fine but I don't know if there a better solution instead of using SESSIONS and interval function?

The POST data is made by using an external program (not by jQuery itself).

PHP

session_id('13245');
session_start();

$session_id = session_id();

if($data['payload'] !== null)
{
    $_SESSION['payload'] = $data['payload'];
    $_SESSION['timestamp'] = microtime();
}
else
{
    $_SESSION['payload'] = $_SESSION['payload'];
    $_SESSION['timestamp'] = $_SESSION['timestamp'];
}   

echo json_encode(array('timestamp' => $_SESSION['timestamp'], 'payload' => $_SESSION['payload']));
?>

jQuery

$(document).ready(function () {
                var oldTimeStamp = 0;
                setInterval(function()
                { 
                    $.ajax({
                      type:"post",
                      url:"post.php",
                      datatype:"json",
                      success:function(data)
                      {
                            var obj = jQuery.parseJSON(data)
                            if(oldTimeStamp != obj.timestamp)
                            {
                                oldTimeStamp = obj.timestamp;
                                $('#displayData').append('timestamp: ' + obj.timestamp);
                                $('#displayData').append(' rawPayload: ' + obj.payload);
                                $('#displayData').append('<br />');
                            }

                      }
                    });
                }, 1000);//time in milliseconds 
            });

Any help will be greatly appreciated.

Answer 1

you can go for "then()" or "done()", immediate after finishing ajax call. here is the sample:

    $.ajax({
        type:"post",
        url:"post.php",
        datatype:"json",
        success:function(data)
            {...}
    }).then(function (data){
        var obj = jQuery.parseJSON(data)
        if(oldTimeStamp != obj.timestamp)
        {
             oldTimeStamp = obj.timestamp;
             $('#displayData').append('timestamp: ' + obj.timestamp);
             $('#displayData').append(' rawPayload: ' + obj.payload);
             $('#displayData').append('<br />');
         }

});

Answer 2

You are trying to make a real-time application such as chatting and real-time visualizations. In order to achive this I suggest you to write with NodeJs SOCKET.IO

If you use PHP it will make your server lode more harder than JavaScript programs like socket.io.

Your Question: It works fine but I don't know if there a better solution instead of using SESSIONS and interval function?

Answer: Definitely it's a bad practice which trigger the server every seconds even there are no new updates. Let's assume you have 100 users online at the same time so your server will be called 100 times every second which is really a more load to the server.

Example: https://socket.io/get-started/chat