CODEWITHSUNDEEP
phpjqueryajaxshell
hossein valizadeh
hossein valizadeh

Reputation: 21

multiple HTML tag update with ajax, jquery

Having a basic understanding about AJAX ,JQUERY here is my code for updating an html tag and showing "date" shell command result on it every seconds.

I am wondering how it is possible to expend this code and add some more tags and update them all. e.g i need to show cpu load, uptime,.....

test2.php

<html>
    <head>
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function() {
            setInterval(timestamp, 1000);
        });
        function timestamp() {
            $.ajax({
                url: '/test2.php',
                success: function(data) {
                    $('#timestamp').html(data);
                },
            });
        }
    </script>
</head>
<body>

<div id="timestamp">clock</div>
<div id="uptime">to be done!</div>

</body>
</html>

test2.php:

<?php
    echo $timestamp=shell_exec('date');
    //echo $uptime=shell_exec('uptime -p');

?>

Upvotes: 0

Views: 220

Answers (1)

D. Simmons
D. Simmons

Reputation: 245

How about sending back JSON to your caller:

<?php

$data = [
     'timestamp' => shell_exec('date'),
     'uptime' => shell_exec('uptime -p')
     ];

echo json_encode($data);

?>

And then this (or something similar) in your Javascript ...

success: function(data) {
     $('#timestamp').html(data.timestamp);
     $('#uptime').html(data.uptime);
},

Upvotes: 1

Related Questions