jQuery AJAX методы: $.ajax(), $.get(), $.post() онлайн урок.


Рассмотрим реализацию AJAX запросов при помощи jQuery. Для работы с AJAX в jQuery предусмотрено три функции:

  • $.ajax() - отправляет GET/POST запросы
  • $.get() - отправляет GET запросы
  • $.post() - отправляет POST запросы

Функция $.get() уже была рассмотрена в начале этого курса в качестве примера. Первым аргументом указывается адрес ресурса и параметры (поскольку это GET, параметры записываются в URL). Второй аргумент - это анонимная функция, которая зависит от тела ответа сервера. Как видим, все намного проще, чем чистый JS. Вместо второго аргумента (для обработки ответа) можно использовать метод done() (см. следующие уроки).

Функция $.post() отправляет POST запрос. Эта функция принимает три аргумента: адрес ресурса, объект из данных, которые являются телом запроса (POST параметры) и функция для обработки тела ответа.

Эти функции являются упрощенными вариантами функции $.ajax(), которая принимает множество параметров для более тонкой настройки запроса.

Рассмотрим пример с функцией $.post(), в котором запишем данные в текстовый файл. Сам скрипт у нас уже есть (см. предыдущие уроки). Все, что нам надо - переписать обработку по клику по кнопке на странице с текстовым полем:
<textarea id="textField" name="text"></textarea> <br/>
<input type="button" id="btn" value="Go"/>

<script>
$(document).ready(function() {
$('#btn').click(function() {
var textValue = $('#textField').val();
$.post('/test.php',{text: textValue});
});
});
</script>

</body>
</html>

Тут
  • дожидаемся пока документ будет полностью загружен $(document).ready( ... )
  • обработка клика по кнопке $('#btn').click( ... )
  • определение значения в текстовом поле и отправка запроса $.post( ... )

Вторым аргументом $.post() указаны параметры запроса - объект, который трансформируется в массив $_POST на сервере.

Тот же самый пример с функцией $.ajax() - вместо вызова $.post() :
$.ajax({
   url: '/test.php',
   method: 'POST',
   data: {text: textValue}
});

Тут мы указали множество свойств запроса, среди которых метод (method), параметры (data), а также анонимная функция (success), которая принимает строку тела ответа сервера.

Ниже приведен пример работающего скрипта. В файле с jQuery приведены скрипты и с $.post() и с $.ajax(). Для корректной работы один из вызовов этих функций необходимо закомментировать.