[JS]Обновление данных на странице при помощи Ajax и Jquery

pligin

Команда форума
Администратор
Простая реализация обновления данных на странице в реальном времени с интервалом в 0,5 секунды на JavaScript
Пример странички HTML
HTML:
<body>
    <h1>ajax.psweb.ru</h1>
 
<h1>A_T <font id="a_t"></font></h1>
<h1>B_T <font id="b_t"></font></h1>
<h1>C_T <font id="c_t"></font></h1>
<h1>D_T <font id="d_t"></font></h1>
<h1>E_T <font id="e_t"></font></h1>
 
    
    <script>
        function show()
        {
            $.ajax({
                url: "/ajax.php?func=getdata",
                cache: false,
                success: function(data){
                    var json = $.parseJSON(data);
                    result = json;
                    $("#a_t").html(result.a_t);//#a_t в какой элемент вывести, result.a_t - что вывести
                    $("#b_t").html(result.b_t);
                    $("#c_t").html(result.c_t);
                    $("#d_t").html(result.d_t);
                    $("#e_t").html(result.e_t);
                }
            });
        }
    
        $(document).ready(function(){
            show();
            setInterval('show()',500); // интервал обновления данных
        });
    </script>
</body>
Пример файла с данными ajax.php
PHP:
if ( $_GET['func'] == 'getdata' ) {
    //заполняем массив
    $data['a_t'] = 1;
    $data['b_t'] = 2;
    $data['c_t'] = 3;
    $data['d_t'] = 4;
    $data['e_t'] = 5;
    //возвращаем массив в виде JSON
    echo json_encode($data);
    exit();
}
Конечно же массив данных $data Вы можете заполнить на свое усмотрение.

Можно упростить функцию show() - нужно подключить jquery
JavaScript:
function show(){
        $.get('/ajax.php?func=getdata', function(o) { //получаем данные в массив o
            $.each(o, function(index, value) {//разбираем массив как ключ и значение
                $("#"+index).html(value);//заполняем элементы html
            });
        }, 'json');
    }
Немного о заполнении элементов html:
Файл ajax.php сформировал массив $data со структурой ключ => значение (a_t =>2)
функция each() перебирает все элементы массива как пара ключ и значение (index, value) и обновляет элемент html с идентификатором равным ключу элемента массива. В нашем случае (a_t =>2) функция обновит элемент
HTML:
<font id="a_t"></font>
и получим
HTML:
<font id="a_t">2</font>
 

pligin

Команда форума
Администратор
эт понятно, но некоторые даж этого не знают и поставят так а хост не ляжет?
Это не является каким-либо модулем или дополнением. Это всего лишь наипростейший пример работы с js и обновлением данных на странице.
Простая реализация обновления данных на странице
 
Верх