Jquery — использование сокращённых ajax методов (с примерами)

Содержание:

JS Учебник
Отлавливаем баги, PHP ошибки
- Дебаг (вывод ошибок на экран)
- Ошибка при возвращении данных
Создание асинхронного AJAX запроса (метод GET)
Синхронный запрос
- Пример
AJAX во внешней части WordPress
- Переменная ajaxurl
  - Пример AJAX кода для фронт энда
Как получить голоса бесплатно?
Отправка изображения или файла ajax-запросом через jQuery
Определяем тип данных ответа
Что такое асинхронный запрос AJAX?
Получаем и запускаем код JavaScript с помощью метода $.getScript()
Пример использования
Пример 3. Передача синхронного AJAX запроса на сервер с помощью метода POST
jQuery $.get() Method
- Example
1 Introduction
jQuery $.post() Method
- Example
Получение json-данных с помощью getJSON

JS Учебник

JS ГлавнаяJS ВведениеJS УстановкаJS ВыводJS СинтаксисJS ЗаявленияJS КомментарииJS ПеременныеJS ОператорыJS АрифметикаJS ПрисваиванияJS Типы данныхJS ФункцииJS ОбъектыJS ОбластьJS СобытияJS СтрокиJS Методы строкJS ЧислаJS Методы чиселJS МассивыJS Методы массиваJS Сортировка массиваJS Итерация массиваJS ДатыJS Формат датыJS Метод получения датJS Методы набора…JS Математические…JS Случайные числаJS БулевыJS Сравнение…JS Заявления if…elseJS Заявление switchJS Цикл forJS Цикл whileJS Заявление break…JS Преобразование…JS Битовые…JS Регулярные выраженияJS ОшибкиJS ОтладчикJS ПодъемныйJS СтрогийJS Ключевое слово thisJS Руководство стиляJS ПрактикаJS Распространенные ошибкиJS ЭффективностьJS Зарезервированные словаJS ВерсииJS Версия ES5JS Версия ES6JS JSON

Отлавливаем баги, PHP ошибки

Ajax-запрос в jquery

Проблемы могут возникнуть при AJAX запросе и появлении ошибок PHP. Заметки или сообщения могут изменить возвращаемый результат или вызвать ошибку javascript.

Дебаг (вывод ошибок на экран)

Вариант:

Как правило запросы отправляются с браузера в файл. Поэтому чтобы увидеть результат запроса, ошибку или что-либо еще, можно открыть панель разработчика, выбрать именно наш запрос среди многих и посмотреть что он вернул.

При этом в коде можно использовать привычные функции print_r() или var_dump(), чтобы увидеть что находится в нужных переменных.

Вариант: включаем показ ошибок в AJAX запросах

WordPress по умолчанию не показывает ошибки для AJAX запросов даже если константа WP_DEBUG включена! Видно это в коде функции wp_debug_mode().

Несмотря на это такой показ можно включить, ведь на рабочих проектах у нас все равно WP_DEBUG отключена и боятся нам нечего, а вот баги выловить это помогает на ура!

Чтобы включить показ ошибок при AJAX запроса, нужно вставить такой код в файл темы functions.php или в плагин. Но лучшее его вставить как можно раньше, чтобы видеть ранние ошибки, лучше всего в MU плагины…

if( WP_DEBUG && WP_DEBUG_DISPLAY && (defined('DOING_AJAX') && DOING_AJAX) ){
	@ ini_set( 'display_errors', 1 );
}

Вариант: вывод данных в лог файл

Если по ходу написания кода нужно заглянуть в переменную $myvar, то еще можно использовать такой код в обработчике ajax запроса:

error_log( print_r($myvar, true) );

В результате, в файл логов сервера (error.log) будет записано содержимое переменной $myvar. Так можно выполнить ajax, и заглянуть в лог.

Вариант: вывод PHP ошибок в лог файл

Чтобы выводить PHP заметки и ошибки в лог файл, нужно включить константу WP_DEBUG_LOG. Такой лог файл появится в папке wp-content.

Вариант:

Если не получается увидеть сообщение об ошибке и нужно работать в режиме разработчика, можно очистить буфер сразу перед возвратом данных:

ob_clean();
echo $whatever;
die();

После этого нужно посмотреть что возвращает запрос через дебаг браузера или как-то еще…

Вариант:

Ошибка при возвращении данных

Если AJAX запрос на в файл провалился, то будет возвращен ответ или .

— ошибка при проверке запроса. См. функцию check_ajax_referer()
— обработка запроса вернула пустой результат
— также возвращается по умолчанию во всех остальных случаях.

Создание асинхронного AJAX запроса (метод GET)

Подключаем jquery. версии jquery

Рассмотрим создание асинхронного AJAX запроса на примере, который будет после загрузки страницы приветствовать
пользователя и отображать его IP-адрес.

Для этого необходимо создать на сервере 2 файла в одном каталоге:

– HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим
скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента.
– PHP-файл, который будет обрабатывать запрос на стороне сервера, и формировать ответ.
Начнём разработку с создания основной структуры файла

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пример работы AJAX</title>
</head>
<body>
  <h1>Пример работы AJAX</h1>
  <div id="welcome"></div>
  <script>
  // Здесь поместим код JavaScript, который будет отправлять запрос на сервер, получать его и обновлять содержимое страницы. Всё это будет работать без перезагрузки страницы

</script>
</body>
</html>

Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):

Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные
никакие не нужны, то данный этап можно пропустить.
Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).
Настроим запрос с помощью метода .

Указываются следующие параметры:
- Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
- URL-адрес, который будет обрабатывать запрос на сервере.
- Тип запроса: синхронный (false) или асинхронный (true).
- Имя и пароль при необходимости.
Подпишемся на событие объекта XHR и укажем обработчик в виде анонимной или
именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и
выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве
.

Дополнительно с проверкой значения свойства числу 4, можно проверять и значение свойства
. Данное свойство определяет статус запроса. Если оно равно 200, то всё . А
иначе произошла ошибка (например, 404 – URL не найден).
Отправим запрос на сервер с помощью метода .

Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они
передаются в составе URL.

Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу
. Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы
сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.

Содержимое элемента :

// 2. Создание переменной request
var request = new XMLHttpRequest();
// 3. Настройка запроса
request.open('GET','processing.php',true);
// 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
request.addEventListener('readystatechange', function() {
  // если состояния запроса 4 и статус запроса 200 (OK)
  if ((request.readyState==4) && (request.status==200)) {
    // например, выведем объект XHR в консоль браузера
    console.log(request);
    // и ответ (текст), пришедший с сервера в окне alert
    console.log(request.responseText);
    // получить элемент c id = welcome
    var welcome = document.getElementById('welcome');
    // заменить содержимое элемента ответом, пришедшим с сервера
    welcome.innerHTML = request.responseText;
  }
}); 
// 5. Отправка запроса на сервер
request.send();

В итоге файл будет иметь следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пример работы AJAX</title>
</head>
<body>
  <h1>Пример работы AJAX</h1>

  <div id="welcome"></div>

<script>
window.addEventListener("load",function() {
  var request = new XMLHttpRequest();
  request.open('GET','processing.php',true);
  request.addEventListener('readystatechange', function() {
    if ((request.readyState==4) && (request.status==200)) {
      var welcome = document.getElementById('welcome');
      welcome.innerHTML = request.responseText;
    }
  });
request.send();
});
</script>

</body>
</html>

На сервере (с помощью php):

Получим данные. Если данные посланы через метод , то из глобального массива
. А если данные переданы с помощью метода , то из глобального
массива .
Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ.
Выведем его с помощью .

<?php
$output = 'Здравствуйте, пользователь! ';
if ($_SERVER) {
  $output .= 'Ваш IP адрес: '. $_SERVER;
}
else {
 $output .= 'Ваш IP адрес неизвестен.';
}
echo $output;

Синхронный запрос

30 бесплатных библиотек и плагинов jquery-анимации

Чтобы выполнить синхронный запрос, измените третий параметр в методе на :

xhttp.open(«GET», «ajax_info.txt», false);

Иногда для быстрого тестирования используются async = false. Вы также найдете синхронные запросы в более старом коде JavaScript.

Так как код будет ждать завершения работы сервера, нет необходимости в функции :

Пример

xhttp.open(«GET», «ajax_info.txt», false);
xhttp.send();
document.getElementById(«demo»).innerHTML = xhttp.responseText;

Синхронный XMLHttpRequest (async = false) не рекомендуется, так как JavaScript перестанет выполняться до тех пор, пока не будет готов ответ сервера.
Если сервер занят или работает медленно, приложение зависнет или остановится.

Синхронный XMLHttpRequest находится в процессе удаления из веб стандарта, но этот процесс может занять много лет.

Современные средства разработки рекомендуется предупреждать об использовании синхронных запросов
и может выдать исключение InvalidAccessError, когда это происходит.

AJAX во внешней части WordPress

Первое в чем нужно убедиться — установлена ли на сайте библиотека jQuery.

Во фронт-энде (внешней части сайта) нужно использовать еще один хук для обработки AJAX запросов: wp_ajax_nopriv_(action). Этот хук в отличии от wp_ajax_(action), срабатывает для неавторизованных пользователей.

Т.е. чтобы создать обработчик запроса для всех пользователей: авторизованных и нет, PHP функцию нужно прикреплять сразу к двум хукам:

add_action( 'wp_ajax_(action)', 'my_action_callback' );
add_action( 'wp_ajax_nopriv_(action)', 'my_action_callback' );

‘wp_ajax_nopriv_(action)’ можно не указывать, если не нужно, чтобы AJAX запрос обрабатывался для неавторизованных пользователей.

Переменная `ajaxurl`

Напомню, что переменная есть только в админке и её нет в лицевой части сайта (фронт-энде), поэтому её нужно определить (создать). Но мы назовем её по-другому — , для фронта так удобнее, потому что так в объект myajax можно будет добавить еще данные связанные с AJAX запросом.

Правильный способ создать такую переменную — это использовать функцию wp_localize_script().

// Подключаем локализацию в самом конце подключаемых к выводу скриптов, чтобы скрипт
// 'twentyfifteen-script', к которому мы подключаемся, точно был добавлен в очередь на вывод.
// Заметка: код можно вставить в любое место functions.php темы
add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	// Первый параметр 'twentyfifteen-script' означает, что код будет прикреплен к скрипту с ID 'twentyfifteen-script'
	// 'twentyfifteen-script' должен быть добавлен в очередь на вывод, иначе WP не поймет куда вставлять код локализации
	// Заметка: обычно этот код нужно добавлять в functions.php в том месте где подключаются скрипты, после указанного скрипта
	wp_localize_script( 'twentyfifteen-script', 'myajax', 
		array(
			'url' => admin_url('admin-ajax.php')
		)
	);  

}

В результате, получим в head части сайта прямо перед скриптом ‘twentyfifteen-script’:

<script type='text/javascript'>
/* <![CDATA[ */
var myajax = {"url":"http://wptest.ru/wp-admin/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://wptest.ru/wp-content/themes/twentyfifteen/js/functions.js?ver=20150330'></script>

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

Пример AJAX кода для фронт энда

<?php

add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	wp_localize_script('twentyfifteen-script', 'myajax', 
		array(
			'url' => admin_url('admin-ajax.php')
		)
	);  

}

add_action('wp_footer', 'my_action_javascript', 99); // для фронта
function my_action_javascript() {
	?>
	<script type="text/javascript" >
	jQuery(document).ready(function($) {
		var data = {
			action: 'my_action',
			whatever: 1234
		};

		// 'ajaxurl' не определена во фронте, поэтому мы добавили её аналог с помощью wp_localize_script()
		jQuery.post( myajax.url, data, function(response) {
			alert('Получено с сервера: ' + response);
		});
	});
	</script>
	<?php
}

add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');
function my_action_callback() {
	$whatever = intval( $_POST );

	echo $whatever + 10;

	// выход нужен для того, чтобы в ответе не было ничего лишнего, только то что возвращает функция
	wp_die();
}

Код рассчитан на тему . Вставлять код можно в functions.php темы.

Этот код будет работать для любой темы, единственное что для этого нужно — это поменять название основного скрипта темы , который подключается после jquery.

Как получить голоса бесплатно?

Еще несколько лет назад голоса можно было передавать друг другу. Это открывало возможность для большого количества способов раздобыть заветные денежные единицы. Но сейчас ВКонтакте придерживается более строго политики, что отсекает большинство описанных в интернете способов, как получить голоса в ВК бесплатно.

Официально это можно сделать лишь одним путем: воспользоваться «Специальными предложениями» на странице пополнения баланса (скрин выше). Это выполнение простых заданий от рекламодателей, таких как регистрация, ответы на вопросы, приобретение тех или иных товаров.

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

Время от времени появляются новые задания, поэтому даже если в данный момент ничего нет, не забывайте проверять раздел снова в другое время.

Чтобы выполнить любое задание, кликнете по нему и прочтите подробные инструкции. Если вы готовы их выполнить, то нажмите на кнопку «Перейти на сайт рекламодателя».

Вид и количество заданий во многом зависит от того, насколько активен ваш аккаунт и какие настройки в нем выставлены. Нужно понимать, что рекламодатели взаимодействуют далеко не с каждым человеком, а только с теми, кто относится к их целевой аудитории. Это значит, что если вы в своем профиле указали в качестве страны проживания Китай и свой возраст больше 70 лет, то вряд ли вам станут доступны задания, доступные для человека, проживающего в Москве в возрасте 25 лет.

Отправка изображения или файла ajax-запросом через jQuery

Задача отправки файла или изображения на сервер без перезагрузки страницы довольно часто возникает. В этом примере разберу сразу 2 фишки: выбор файла по нажатию на кнопку, которая может быть оформлена как угодно, и отображение прогресса при передаче файла на сервер ajax-запросом.

html-код будет такой:

<button id="addfile"><span>Загрузить изображение</span><input type="file" id="load_file" value=""></button>

css код:

#addfile {
  position: relative;
  overflow: hidden;
  width: 180px;
  height: 34px;
}
#load_file {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 34px;
  font-size: 0px;
  opacity: 0;
  filter: alpha(opacity:0);
}
#load_file:hover {
  cursor: pointer;
}

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

$(function() {
  $('#load_file').on('change', loadfile);
});

function loadfile() {
  $('#addfile span').html('Загружено 0 %');
  files = $('#load_file').files;
  var form = new FormData();
  form.append('upload', files);
  $.ajax({
    url: '<url-адрес>',
    type: 'POST',
    data: form,
    cache: false,
    processData: false,
    contentType: false,
    xhr: function() {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        myXhr.upload.addEventListener('progress',ShowProgress, false);
      }
      return myXhr;
    },
    complete: function(data){
      $('#addfile span').html('Загрузить изображение');
      $('#load_file').val('');
    },
    success: function(message){
      alert(message);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert(textStatus+' '+errorThrown);
    }
  });
}

function ShowProgress(e) {
  if(e.lengthComputable){
    $('#addfile span').html('Загружено '+Math.round(100*e.loaded/e.total)+' %');
  }
}

При загрузке файла на сервер в кнопке будет показываться сколько % уже передано на сервер. После завершения загрузки название кнопки возвращается как было, а значение input-а с файлом устанавливается пустым, чтобы можно было снова выбирать новый файл.

Пример серверной части на php (по просьбе Евгения):

  $message = '';
  if (empty($_FILES) || $_FILES == "none") {
    $message = 'Вы не выбрали файл';
  } else if ($_FILES == 0 || $_FILES > 9437184) {
    $message = 'Размер файла не соответствует нормам (максимум 9 Мб)';
  } else if (($_FILES != 'image/jpeg') && ($_FILES != 'image/pjpeg') &&
             ($_FILES != 'image/gif') && ($_FILES != 'image/png')) {
    $message = 'Допускается загрузка только картинок JPG, GIF и PNG.';
  } else if (!is_uploaded_file($_FILES)) {
    $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.';
  } else {
    $ftype = $_FILES;
    $fname = 'newname_image.'.($ftype == 'image/gif' ? 'gif' : ($ftype == 'image/png' ? 'png' : 'jpg'));
    if (move_uploaded_file($_FILES, $_SERVER.'/files/'.$fname)) {
      $message = 'Изображение успешно загружено.';
    } else {
      $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.';
    }
  }
  exit($message);

Информация о загруженном изображении будет содержаться в $_FILES, т.к. скриптом файл добавлялся так: form.append(‘upload’, files); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

Определяем тип данных ответа

Обычно, серверная сторона передает данные в одном из нескольких типовых форматов, включая XML, JSON, JavaScript, или HTML. По умолчанию jQuery пытается определить наиболее подходящий формат и разобрать данные соответствующим образом. Но лучше явно определить формат.

Для указания формата надо передать четвертый аргумент методу . Данный аргумент может быть строкой из следующего списка:

Например, если вы знаете, что скрипт сервера возвращает данные в формате JSON, то вызываете метод следующим образом:

$.get( "http://example.com/getForecast.php", data, myCallback, "json" );

Что такое асинхронный запрос AJAX?

Технология AJAX в основном используется для создания асинхронных запросов к серверу. Асинхронный запрос — это такой
запрос, который выполняется в фоновом режиме и не мешает пользователю взаимодействовать со страницей.

При отправке асинхронного запроса, браузер (страница) не «замораживается», т.е. с ней, как и прежде, можно работать.
Но тогда как узнать, когда придёт ответ с сервера. Чтобы это определить, необходимо отслеживать свойство браузера
(состояние готовности). Данное свойство содержит число, по значению которого можно судить о
том, в какой стадии находится запрос. В следующей таблице приведены основные значения свойства
и соответствующие им состояния.

Значение свойства readyState	Описание
запрос не инициализирован
1	выполнена настройка запроса
2	запрос отправлен
3	запрос находится в процессе обработки на сервере
4	запрос завершён

Т.е. получается, что нам необходимо отследить, когда значение у свойства будет равно 4. Это
будет означать то, что на отправленный запрос, пришёл ответ с сервера. Остальные значения на практике используются
довольно редко, и некоторые браузеры могут их не поддерживать.

Для того чтобы определить на какой стадии находится запрос, необходимо использовать событие объекта XMLHttpRequest
. Данное событие происходит каждый раз, когда изменяется значение свойства
. Следовательно, в обработчике этого события (неименованной или именованной функции) можно
прописать действия, которые будут проверять равно ли данное свойство 4 и если равно, то например, вывести ответ
сервера на страницу.

Получаем и запускаем код JavaScript с помощью метода $.getScript()

Также как и метод , который является короткой записью вызова метода для получения данных в формате JSON, метод является короткой записью вызова метода для получения и выполнения кода JavaScript, то есть аналогично использованию параметра формата данных . Метод получает два аргумента:

URL файла JavaScript для загрузки.
Опциональную возвратную функцию, которая выполняется по завершению выполнения загруженного JavaScript кода.

Метод используется для загрузки библиотек и плагинов JavaScript «на лету», то есть тогда, когда они нужны. Так можно уменьшить время начальной загрузки страницы, потому что не нужно включать в заголовок страницы каждую библиотеку JavaScript, которая может быть понадобится, а может быть и нет.

Для демонстрации работы метода переместим код, который выводит прогноз в отдельный файл JavaScript . Весь код будет размещен в функции :

function showForecast( forecastData ) {
  var forecast = forecastData.city + ". Прогноз погоды на " + forecastData.date;
  forecast += ": " + forecastData.forecast + ". Максимальная температура:" + forecastData.maxTemp + "C";
  alert( forecast );
}

Также изменим страницу для получения нашего кода JavaScript с помощью метода :

<!doctype html>
<html lang="ru">
<head>
<title>Прогноз погоды</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script>
 
$( function() {
 
    $.getScript( "showForecast.js", function() {
 
      $('#getForecast').click( function() {
        var data = { city: "Васюки", date: "20120318" };
        $.get( "getForecast.txt", data, showForecast, "json" );
      } );
 
    } );
 
  } );
 
</script>
 
</head>
 
<body>
 
<button id="getForecast">Получить прогноз погоды</button>
 
</body>
</html>

Запускаем демонстрационный файл и наблюдаем результат работы кода JavaScript, который подгружается из другого файла по мере необходимости.

Код JavaScript в файле начинается с вызова для загрузки библиотеки . Также создается анонимная возвратная функция, которая выполняется сразу после загрузки . Данная функция добавляет обработчик события для кнопки , который вызывает метод для получения файла и выполнения загруженной функции для вывода сообщения.

Метод добавляет случайный параметр к строке запроса (например,) для предотвращения кэширования браузером файла JavaScript.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery функции $.get()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "form" ).submit(function(){
	    event.preventDefault(); // отменяем действие события по умолчанию
	    var formData = $( this ).serialize(); // создаем переменную, которая содержит закодированный набор элементов формы в виде строки

	    $.get( "user2.php", formData, function( data ) { //  передаем и загружаем данные с сервера с помощью HTTP запроса методом GET
	      $( "div" ).html( data ); // вставляем в элемент <div> данные, полученные от сервера
	    })
	  });
	});
		</script>
	</head>
	<body>
		<form> <!-- метод GET по умолчанию -->
			<input type = "text" placeholder = "Имя" name = "firstName" required> <!-- поле обязательно к заполнению -->
			<input type = "text" placeholder = "Фамилия" name = "lastName" required> <!-- поле обязательно к заполнению -->
			<input type = "submit" value = "Добавить">
		</form>
		<div></div>
	</body>
</html>

В этом примере мы привязываем JavaScript обработчик событий «submit» (обработчик отправки формы), который срабатывает в момент отправки (в нашем случае заполненной) формы при нажатии на элемент <input> с типом submit (кнопка для отправки формы).
При отправке формы мы вызываем JavaScript метод event.preventDefault(), который позволяет нам отменить действие события по умолчанию и избежать перезагрузки страницы и передачи собранной информации как часть URL (url?firstName=значение&lastName=значение).

Кроме того, мы создаем переменную, которая содержит закодированный набор элементов формы в виде строки — результат выполнения метода .serialize().
После этого с использованием jQuery функции $.get() выполняем асинхронный AJAX запрос со следующими параметрами:

url — файл, к которому мы обращаемся («user2.php»), он содержит следующий PHP код:

<?php $firstName = $_GET; // создаем переменную firstName, которая содержит переданные скрипту через HTTP метод GET данные (с ключом firstName)
$lastName = $_GET; // создаем переменную lastName, которая содержит переданные скрипту через HTTP метод GET данные (с ключом lastName)
echo «Пользователь «.$firstName.» «.$lastName.» добавлен»; // выводим текстовое содержимое (значение выше созданных переменных)
?>

data — данные, которые будут отправлены на сервер (значение переменной formData).

success — функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно

Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера, которые мы и вставляем в элемент с помощью метода .html().

Результат нашего примера:

Пример использования jQuery функции $.get()

В следующем примере мы рассмотрим как с помощью jQuery функции $.get() загрузить JSON файл и выведем из него некоторую информацию:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования функции $.get (загрузка JSON файла)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	    $.get( "test.json", function( data ) { //  загружаем данные с сервера с помощью HTTP запроса методом GET
	      $( "div" ).html( data.firstName + " " + data.age ); // вставляем в элемент <div> данные, полученные от сервера
	    })
	  });
	});
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

В этом примере при загрузке документа мы с использованием jQuery функции $.get() выполняем асинхронный AJAX запрос со следующими параметрами:

url — файл, к которому мы обращаемся («test.json»), он имеет следующее содержимое:

{
«firstName»: «Борис»,
«lastName»: «Бритва»,
«age»: 25,
«phone»: 88005553535
}

success — функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно

Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера (JSON файл), которые мы частично вставляем в элемент с помощью метода .html().

Результат нашего примера:

Пример использования функции $.get (загрузка JSON файла)jQuery AJAX

Пример 3. Передача синхронного AJAX запроса на сервер с помощью метода POST

В этом примере данные на сервер будем передавать с помощью метода POST (в теле HTTP-запроса). В методе POST данные (параметры) передаются не в составе URL (метод GET), а в теле, которое мы посылаем серверу через . Т.е. для того чтобы передать данные с помощью POST, мы их должны поместить в качестве параметра методу . Кроме того, при отправке данных с помощью POST необходимо также указать заголовок Content-Type, содержащий кодировку с помощью которой мы зашифровали данные. Это необходимо сделать для того чтобы сервер знал как обработать (расшифровать), пришедшие к нему данные (запрос).

<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>JavaScript AJAX</title>
    <style>
      span {
        font-weight: bold;
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Введите имя и нажмите на кнопку "Получить...".</p> 
    <input id="nameUser" type="text" placeholder="Введите имя">
    <input id="button" type="button" value="Получить ответ с сервера">
    <p>Ответ (AJAX): <span id="answer"></span></p>
    <script src="script.js"></script>
  </body>
</html>

// получить элемент, имеющий id="button"
var button = document.getElementById("button");
// подпишемся на событие click элемента 
button.addEventListener("click",function() {
  // создадим объект XMLHttpRequest
  var request = new XMLHttpRequest();
  // параметры запроса
  var params = 'name=' + encodeURIComponent(document.getElementById("nameUser").value);
  // настраиваем запрос: POST - метод, ajaxpost.php - URL-адрес, по которому посылается запрос, false - синхронный запрос
  request.open('POST','ajaxpost.php',false);
  // указываем заголовок Content-Type, содержащий кодировку 
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  // отправляем данные на сервер с помощью метода send
  request.send(params);
  // если статус ответа 200 (OK) то
  if (request.status==200) {
    // выведем в элемент, имеющий id="answer", ответ сервера
    document.getElementById("answer").innerHTML = request.responseText;
  }	
})

<?php
// если в ассоциативном массиве $_POST существует ключ name
if (isset($_POST)) {
  // присвоим переменной $name значение из ассоциативного массива POST соответсвующее ключу name
  $name = $_POST;
  // выведем строку (ответ сервера)
  echo "Привет, ".$name."!";
}     
?>

jQuery $.get() Method

The method requests data from the server with an HTTP GET request.

Syntax:

$.get(URL,callback);

The required URL parameter specifies the URL you wish to request.

The optional callback parameter is the name of a function to be executed
if the request succeeds.

The following example uses the method to retrieve data from a file on
the server:

Example

$(«button»).click(function(){
$.get(«demo_test.asp», function(data, status){
alert(«Data: » + data + «\nStatus: » + status);
});
});

The first parameter of is the URL we wish to request («demo_test.asp»).

The second
parameter is a callback function. The first callback parameter holds the content of
the page requested, and the second callback parameter holds the status of
the request.

Tip: Here is how the ASP file looks like («demo_test.asp»):

<%
response.write(«This is some text from an external ASP file.»)
%>

1 Introduction

You load a website and you see something. You click on a button — maybe «next page» to change the result set — and it loads new data, but the page didn’t refresh. This happened thanks to AJAX.

Let’s look at a real-life example. Go to google.com and search for «dogs» — see how the search results appear instantly, and they even change when you alter the search? That data got pulled in «on-demand,» and that’s what AJAX is. AJAX relies on both JavaScript and HTTP, and it’s good to understand both in order to completely grasp AJAX.

1.1 What is HTTP?

What you see when you browse a page is not just one big object. It’s actually made up of multiple pieces that are pulled together behind the scenes, in several different HTTP requests. This video gives a good overview of HTTP.

HTTP is like an annoying kid that always has something to say back to you. We make requests like «I want the search results for the ‘dog’ keyword.» Every request has a response; if everything went OK, we would get back an HTTP Status code of 200, or . If something went wrong, it usually returns one of several errors in the 400s and 500s, depending on the problem. Every request includes the data that we send along with additional information, contained in header fields, describing what we want and how we want it. The same goes for the response.

HTTP uses verbs to describe actions like getting, creating, updating, and deleting. The verb is usually used to create resources, and that’s the one we’ll use in our example.

1.2 How do I see my requests?

There are several tools that will allow you to see all of the individual requests, and most can be added to your web browser or already come built right in.

Firefox includes the built-in Firefox Inspector, which you can access with the shortcut or . HTTP requests appear under the Network tab. There’s also Firebug for Firefox — which you can download here — and open using the or shortcut; HTTP requests can be found in the Net tab.

Safari, Chrome, and Internet Explorer also have built-in developer toolbars. Both Chrome and IE have a Network tab, while requests are shown under Safari’s Timelines tab. We’ll be using the Firefox Inspector, which by default shows every request including JavaScript, CSS, Images, and XHR. The inspector only shows requests made while it’s open, so you’ll need to refresh the page to capture them the first time.

1.3 XHR, is that a virus or something?

No. You won’t be suffering from a venereal disease, I promise. Browsers use a special JavaScript object called the to make HTTP requests in the background. You can think of it as your personal assistant that gets things for you and puts them where they’re supposed to be once you give them instructions. With jQuery you don’t have to worry about learning how to use this object, because the framework has taken care of all of the nitty-gritty details for you.

1.4 Why should I care?

If you know how to put together the pieces, you’ll be able to handle any AJAX situation. You could hop into another framework like Dojo, or even understand the AJAX parts of AngularJS.

Just as the HTML page from our mental model above was a single GET request, we could do the same with other types of requests. We could modify data on our server using POST, PUT, PATCH or DELETE, for example.

jQuery $.post() Method

The method requests data from the server using an HTTP POST request.

Syntax:

$.post(URL,data,callback);

The required URL parameter specifies the URL you wish to request.

The optional data parameter specifies some data to send along with the
request.

The optional callback parameter is the name of a function to be executed
if the request succeeds.

The following example uses the method to send some data along with the
request:

Example

$(«button»).click(function(){
  $.post(«demo_test_post.asp»,
  {
    name: «Donald Duck»,
    city: «Duckburg»
  },
  function(data, status){
    alert(«Data: » + data + «\nStatus: » + status);
});
});

The first parameter of is the URL we wish to request («demo_test_post.asp»).

Then we pass in some data to send along with the request (name and city).

The ASP script in «demo_test_post.asp» reads the parameters,
processes them, and returns a result.

The third
parameter is a callback function. The first callback parameter holds the content of
the page requested, and the second callback parameter holds the status of
the request.

Tip: Here is how the ASP file looks like («demo_test_post.asp»):

<%
dim fname,city
fname=Request.Form(«name»)
city=Request.Form(«city»)
Response.Write(«Dear » & fname & «. «)
Response.Write(«Hope you live well in » & city & «.»)
%>

Получение json-данных с помощью getJSON

getJSON — укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.

$.getJSON('<url-адрес>', {par1:val1, par2:val2, ...}).success(function(data) {
  // что-то делаем с данными, например, обходим их в цикле и выводим:
  for (var i=0; i<data.length; i++) {
    console.log(data.text);
  }
}).error(function(xhr, textStatus, errorThrown) {
  alert('Ошибка: ' + textStatus+' '+errorThrown);
});

На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:

$arr = array();
$arr = array('id' => 10, 'text' => 'тестовая строка 1');
$arr = array('id' => 20, 'text' => 'тестовая строка 2');
$arr = array('id' => 30, 'text' => 'тестовая строка 3');
echo json_encode($arr);

Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.

Jquery — использование сокращённых ajax методов (с примерами)

JS Учебник

Отлавливаем баги, PHP ошибки

Дебаг (вывод ошибок на экран)

Ошибка при возвращении данных

Создание асинхронного AJAX запроса (метод GET)

Синхронный запрос

Пример

AJAX во внешней части WordPress

Переменная ajaxurl

Пример AJAX кода для фронт энда

Как получить голоса бесплатно?

Отправка изображения или файла ajax-запросом через jQuery

Определяем тип данных ответа

Что такое асинхронный запрос AJAX?

Получаем и запускаем код JavaScript с помощью метода $.getScript()

Пример использования

Пример 3. Передача синхронного AJAX запроса на сервер с помощью метода POST

jQuery $.get() Method

Example

1 Introduction

1.1 What is HTTP?

1.2 How do I see my requests?

1.3 XHR, is that a virus or something?

1.4 Why should I care?

jQuery $.post() Method

Example

Получение json-данных с помощью getJSON

Переменная `ajaxurl`