Как обновить данные через ajax и php?
Ответ
Пусть при нажатии на кнопку мы должны получить случайное число от 1 до 100 включительно. Генерация числа должна происходить на сервере (например, из-за сложного алгоритма, который требует каких-то таблиц данных), потому необходимо отправлять запрос на сервер. Но так как обновлять всю страницу нет необходимости, то будем использовать технологию ajax.
Для начала скачаем подходящую анимацию в формате gif, которая будет показывать пользователю, что идет процесс получения числа. Например, выберем что-нибудь на сайте www.chimply.com в разделе animated bar.
Далее создадим файл index.php с кодом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример ajax</title> </head> <body> <p>Здесь появится случайное число</p> <button>Старт</button> <div id="loader" style="display:none;"><img src="loader.gif"></div> <script src="js/jquery.js"></script> <script> $("button").click(function() { $.ajax({ // метод передачи данных POST type: "POST", // на сервере обратимся к файлу ajax.php, // который находится рядом с index.php url: "ajax.php", // передаем две переменные с именами min и max, // равные 1 и 100 соответственно data: {min: 1, max: 100}, // перед отправкой показываем loader.gif beforeSend: function() {$('#loader').fadeIn();}, // если получен ответ от сервера, то скрываем loader.gif за 300 мс // и помещаем в <p></p> полученное число success: function(res) { $('#loader').fadeOut(300, function() {$("p").text(res);}); }, // если ошибка, то скрываем loader.gif за 300 мс и // затем помещаем в <p></p> текст о недоступности сервера error: function() { $('#loader').fadeOut(300, function() {$("p").text('Сервер временно недоступен');}); } }); return false; }); </script> </body> </html> |
Код из файла ajax.php:
|
1 2 3 4 5 6 7 |
if (isset($_POST['min'])) { echo rand($_POST['min'],$_POST['max']); } die(); |
Заметим, что в данном примере о безопасности мы совершенно не заботимся.
Пример с форматом JSON
Фрагмент index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
function test() { $.ajax({ type: "POST", url: "ajax.php", dataType: 'JSON', data: { id: 42, login: 'itmathrepetitor', fio: ['Иванов', 'Иван', 'Иванович'], }, beforesend: $('.content').html('Загрузка'), success: function(data, code){ if (code==200){ // запрос успешно прошел $('.content').html(data); }else{ // возникла ошибка, возвращаем код ошибки $('.content').html(code); } // данные, которые вернул сервер $('.content').html('Ваше имя: '+data.fio[1]); }, error: function(xhr, str){ $('.content').html('Ошибка'); }, complete: function(){ //без параметров //скрываем какой-нибудь элемент $('#something').hide(); } }); |
Файл ajax.php
|
1 2 3 4 5 6 7 8 |
$data = array( 'login' => 'petr', 'fio' => array('Петров','Петр','Петрович'), 'age' => 20, 'work' => 'itmathrepetitor' ); echo json_encode($data); |
еще вопросы и ответы