JQuery ajax

Недавно в уроке про чат на JQuery писал как использовать отправку данных с помощью Ajax на JQuery. В этой статье я расскажу как вообще пользоваться Аяксом с помощью фреймворка JQuery. Для этого есть метод ajax. Привожу простой пример:

    $.ajax({
    type: "POST",
    url: "/ajax.php",
    data: { 'data': 'данные которые отдаем бэкенду' },
    error: function (){
         alert('Ошибка соединения');
    },
    success: function(msg){
        alert(msg);
    }
    });

Раз я уж решился описывать работу Ajax, то расскажу более подробно, те кто знаком с принципами работы аякса, отправки и получения данных без перезагрузки страницы, то могут немного прокрутить эту статьи и читать где описаны принцип работы метода ajax. Итак - прицип работы заключается в том что на странице (Frontend, фронтенд) Пользователь нажимает , например кнопочку, и необходимо просто отправить данные скрипту (Backend, бекэнду) и получить какой то ответ. В нашем примере выше приведенный скрипт отправки данных помещается на страницу. А бэкенд ajax.php - php скрипт будет обрабатывать данные, которые ему отправили.

Теперь объясняю что я там понаписал выше.

как я уже гвоорил $.ajax - это и есть функция вызова ajax запроса, в которой есть несколько параметров:

  • type - тип запроса, может быть GET или POST
  • url - адрес php скрипта, куда посылаются данные (бекенд)
  • data - в этом параметре через запятую перечисляем необходимые данные которые отправятся бэкенду, в нашем примере будет переменная data, в которой присвоено значение "данные которые отдаем бэкенду"
  • error - обработчик ошибки. Ошибки возникают в случае если указали неверный адрес скрипта, либо скрипт вернул ошибку 504, 503 и тд, либо когда оборвалась связь
  • success - обработчик успешного выполнения скрипта, в обработчик в качестве параметров функции поступает контент который выдал бэкенд. То есть в нашем примере появится сообщение с тем что выдал php скрипт.

Привожу законченный пример работы отправки данных Ajax JQery.
Пример FrontEnd:

<button onclick="call_ajax()">Отправить запрос</button>
<script>
function call_ajax(){
    $.ajax({
    type: "POST",
    url: "/ajax.php",
    data: { 'data': 'данные которые отдаем бэкенду' },
    error: function (){
         alert('Ошибка соединения');
    },
    success: function(msg){
        alert(msg);
    }
    });
}
</script>

содержимое файла /ajax.php

print $_POST['data'];

Результатом работы будет сообщение на экране "Данные которые отдаем бэкенду".

Вот и все. Для практического применения можете прочитать статью чат на JQuery

Запись опубликована в рубрике JQuery, Веб-программирование. Добавьте в закладки постоянную ссылку.

Комментарии запрещены.