Работа с php скриптами через ajax.

Дата публикации: 29.03.2013

Сегодня речь пойдет о технологии ajax которая позволяет обращаться к php скриптам на сервере без перезагрузки страницы, в одной из своих статей "Выполнение php скрипта без перезагрузки страницы" я уже приводил пример работы технологии ajax.

Сегодня я покажу простой пример где мы также будем использовать ajax но код у нас выйдет в два ато и три раза меньше за счет того что мы будем использовать в нашем скрипте библиотеку jQuery и ее встроенную функцию $.ajax(); которая и делает всю отправку запроса на сервер и получения ответа от сервера.

В первую очередь нам нужно подключить библиотеку jQuery и сделать это проще всего можно сделать так.

Теперь давайте создадим файл script.js и также подключим его сразу после библиотеки jQuery выглядит это теперь вот так.

Не отходя от кассы давайте сразу разберемся с файлом script.js и пропишем весь нужный код, в первую очередь пропишем стандартную функцию которая дожидается построения DOM элементов а проще говоря функция дожидается полной загрузки страницы чтоб можно было работать с элементами нашей страницы такими как div контейнеры заголовки, ссылки и тд... Данная функция прописывается вот так.

$(document).ready(function(){
        
});

Теперь в ну три этой функции мы будем писать нашу функцию которая при клике по нужной ссылке будет обращаться к нашему скрипту на сервере и возвращать результат. Вот так выглядит наша функция отправки запроса скрипту.

$(document).ready(function(){
/////////////////////////////////////////////////////////////////

    $("#info a").click(function(e){

        e.preventDefault();
        var el = $(this);
        var img = $("");
        img.attr("src", "1.gif");
        el.html("").append(img); 
        $.ajax({ 
            url: el.attr("href"),
            success: function(data){
                                
                el.html(data);
            }
        });
    })


        
//////////////////////////////////////////////////////////////////      
});

Как видите в функции мы указали действие клик по ссылке которая находится в див блоке с id="info" результат возвращается туда же. Также в функции указана картинка 1.gif, данная картинка будет отображаться пока php скрипт на сервере не вернет нам ответ.

Теперь когда все js скрипты у нас написаны пора переходить к написанию самого php скрипта который в нашем примере будет показывать текущее время а именно часы, минуты, секунд, сам скрипт у нас будет выглядеть вот так.

 echo date('H:i:s');

Теперь нужно создать ссылку в нашем html документе при каждом клике по которой будет выводится обновленное текущее время, в качестве ссылки указываем путь к нашему php скрипту то есть обработчику, также ссылку помещаем в div контейнер с идентификатором #info выглядит наша ссылка вот так.