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