JS/jQuery

Работа с JQuery AJAX

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

Пример GET запроса

Запрос идет на index.php с параметром «text» и его значением «Текст» через метод GET.
По сути это то же самое что перейти в браузере по адресу - http://site.com/index.php?text=Текст
В результате запроса index.php вернет строку «Данные приняты - Текст», которая будет выведена в модальном окне (alert).

$.ajax({
    url: '/index.php',         /* Куда пойдет запрос. */
    method: 'get',             /* Метод передачи (post или get), по умолчанию get. */
    dataType: 'html',          /* Тип данных которые ожидаются в ответе (xml, json, script, html). */
    data: {text: 'Текст'},     /* Параметры передаваемые в запросе. */
    success: function(data){   /* функция которая будет выполнена после успешного запроса.  */
        alert(data);           /* В переменной data содержится ответ от index.php. */
    }
});

Код можно сократить используя функцию $.get

$.get('/index.php', {text: 'Текст'}, function(data){
    alert(data);
});

Код файла index.php

echo 'Данные приняты - ' . $_GET['text'];

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр - cache: false

$.ajax({
    url: '/index.php',
    method: 'get',
    cache: false
});

Пример POST запроса

$.ajax({
    url: '/index.php',
    method: 'post',
    dataType: 'html',
    data: {text: 'Текст'},
    success: function(data){
        alert(data);
    }
});

Или сокращенная версия - функция $.post

$.post('/index.php', {text: 'Текст'}, function(data){
    alert(data);
});

Код файла index.php

echo 'Данные приняты - ' . $_POST['text'];

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize(), подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива - {login: 'ЗНАЧЕНИЯ_ПОЛЯ', password: 'ЗНАЧЕНИЯ_ПОЛЯ'}.

Особенности serialize():

  • Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
  • serialize() можно применить только к тегу <form>, т.е. $('div.form_container').serialize(); - вернет пустой результат.

Пример отправки и обработки формы:

<div class="form_container">
    <div id="message"></div>
    <form id="form">
        <input type="text" name="login">
        <input type="text" name="password">
        <input type="submit" name="send" value="Отправить">
    </form>
</div>

<script>
$("#form").on("submit", function(){
    $.ajax({
        url: '/handler.php',
        method: 'post',
        dataType: 'html',
        data: $(this).serialize(),
        success: function(data){
            $('#message').html(data);
        }
    });
});
</script>

Код файла handler.php

if (empty($_POST['login'])) {
    echo 'Укажите логин';
} elseif (empty($_POST['password'])) {
    echo 'Укажите пароль';
} else {
    echo 'Авторизация...';
}

Работа с JSON

Идеальный вариант когда нужно работать с массивами данных.

$.ajax({
    url: '/json.php',
    method: 'get',
    dataType: 'json',
    success: function(data){
        alert(data.text);    /* выведет "Текст" */
        alert(data.error);   /* выведет "Ошибка" */
    }
});

Или короткая версия:

$.getJSON('/json.php', function(data) {
    alert(data.text);
    alert(data.error);
});

$.getJSON передает запрос только через GET.

Код файла json.php

header('Content-Type: application/json');

$result = array(
    'text'  => 'Текст',
    'error' => 'Ошибка'
);

echo json_encode($result);

Выполнение JS скрипта загруженного через AJAX

В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.

$.ajax({
    method: 'get',
    url: '/script.js',
    dataType: "script"
});

Или:

$.getScript('/script.js');

Как дождаться выполнения AJAX запроса?

По умолчанию в JQuery AJAX запросы выполняются асинхронно. Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно.

Простой пример:

var text = '';

$.ajax({
    url: '/index.php',
    method: 'get',
    dataType: 'html',
    success: function(data){
        text = data;
    }
});

alert(text);  /* Переменная будет пустая. */

Переменная var text будет пустая, а не как ожидается текст который вернул index.php

Чтобы включить синхронный режим нужно добавить параметр async: false.
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в <head> страницы.

var text = '';

$.ajax({
    url: '/index.php',
    method: 'get',
    dataType: 'html',
    async: false,
    success: function(data){
        text = data;
    }
});

alert(text); /* В переменной будет результат из index.php. */
23 декабря 2016