Ajax-запрос к серверу через jquery

Содержание:

Содержание раздела:
Что я могу сделать с помощью AJAX ?
Определение и применение
Как создать или вставить данные с помощью jQuery AJAX?
Как получить данные определенного товара с помощью jQuery AJAX?
PHP
Метод jQuery.getJSON()
Подключение jQuery 3-й версии
Напутствие по выбору
jQuery.post( url [, data ] [, success ] [, dataType ] )Возвращает: jqXHR
- - Объект jqXHR
  - Уведомление об устаревании
Ввод в поле с телефоном только цифр с помощью jQuery-плагина
Библиотеки
Делаем запрос POST с помощью метода $.post()
Пример использования
Пример использования
5 последних уроков рубрики «PHP»
Ошибки при AJAX-запросах
- Особенности AJAX-запросов в jQuery 3-й версии

Содержание раздела:

Что я могу сделать с помощью AJAX ?

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

Смысл AJAX — в интерактивности и быстром времени отклика.

В первую очередь AJAX полезен для небольших элементов, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.

Например, дерево, узлы которого подгружаются по мере раскрытия.

Например, при редактировании статьи — каждые 10 минут результаты автосохраняются на сервере.

Самый типичный пример — чат. В окошко постоянно поступают все новые сообщения, непрерывно подгружаемые с сервера. И, опять же, через AJAX, без перезагрузки страницы, пользователь может
отсылать сообщения на сервер.

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

Определение и применение

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

jQuery функция $.ajaxSetup() позволяет установить значения по умолчанию для будущих запросов AJAX.

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

По этой причине настоятельно рекомендуется не использовать этот API и вместо этой функции задавать параметры явно в вызове, или определить простой плагин для этого.

Глобальные функции обратного вызова должны быть установлены с соответствующими глобальными методами — обработчиками AJAX событий .ajaxComplete(), .ajaxError(), .ajaxSend(), .ajaxSuccess(), а не устанавливаться внутри функции $.ajaxSetup().

Как создать или вставить данные с помощью jQuery AJAX?

5.1 Обработчик нажатия кнопки «Создать товар»

Jquery — введение

Откройте в папке products файл create-product.js

Следующий код будет обрабатывать нажатие кнопки. Эта кнопка должна иметь класс create-product-button.

5.2 Получение списка категорий из API

Нам нужно получить список категорий из API, потому что мы создадим поле выбора (select) «категории». Здесь пользователь сможет выбрать категорию продукта.

Замените // здесь будет вызов API категорий следующим кодом.

5.3 Создание кнопки выбора категории

Здесь мы создадим тег select с опцией «Categories».

Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

5.4 Добавление кнопки «Все товары»

Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку товаров.

Поместите следующий код после кода предыдущего раздела.

5.5 Создание HTML-формы «Создание товара»

Теперь мы создадим HTML-форму «Создание товара». Здесь пользователь может ввести информацию о новом продукте, которая будет отправлена на сервер.

Поместите следующий код после кода предыдущего раздела.

5.6 Показать форму «Создание товара» и изменить заголовок страницы

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

Добавьте следующий код после кода предыдущего раздела.

5.7 Обработчик кнопки «Создать товар», получение данных формы и отправка данных на сервер

Если форма «Создание товара» отправлена, нам нужен скрипт для ее обработки.

Замените комментарий // здесь будет обработчик «создать форму товара» следующим кодом.

Как получить данные определенного товара с помощью jQuery AJAX?

6.1 Обработчик кнопки «Просмотр товара»

Кнопка «Просмотр товара» отображается в общем списке. При клике должны отображаться полные сведения о товаре.

Откройте файл read-one-product.js в папке app/products.

Добавьте следующий код.

6.2 Получение ID товара

Наш скрипт должен идентифицировать запись для чтения. Мы сделаем это путем получения идентификатора товара.

Вместо комментария // здесь будет получение ID товара внесите следующий код.

6.3 Чтение одной записи с API

Мы отправим ID товара в API. Он вернет данные на основе данного идентификатора.

Поместите следующий код после кода предыдущего раздела.

6.4 Добавление кнопки «Все товары»

Нам нужна кнопка «Все товары» вернуться к списку всех товаров.

Замените комментарий // здесь будет кнопка для просмотра всех товаров на следующий код.

6.5 Показ полных данных о товаре в таблице

Мы будем выводить информацию о товаре, возвращаемую из API, в HTML таблицу.

Вставьте следующий код после кода предыдущего раздела.

6.6 Вывод таблицы «Просмотр товара» и изменение заголовка страницы

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

Поместите следующий код после кода предыдущего раздела.

PHP

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

ajax.php / 1

// Будем использовать данный класс для определения каждого элемента select

class SelectBox{
	public $items = array();
	public $defaultText = '';
	public $title = '';
	
	public function __construct($title, $default){
		$this->defaultText = $default;
		$this->title = $title;
	}
	
	public function addItem($name, $connection = NULL){
		$this->items = $connection;
		return $this; 
	}
	
	public function toJSON(){
		return json_encode($this);
	}
}

Теперь нам нужно только создать экземпляр данного класса для каждого элемента выбора и вызвать методaddItem() для добавления опций. Данный метод имеет опциональный параметр $connection, который содержит имя зависимого элемента выбора.

ajax.php / 2

/* конфигурация элементов select */

// Продукт

$productSelect = new SelectBox('Что желаете купить?','Выберите категорию продукта');
$productSelect->addItem('Телефоны','phoneSelect')
			  ->addItem('Ноутбуки','notebookSelect')
			  ->addItem('Планшеты','tabletSelect');

// Типы телефонов

$phoneSelect = new SelectBox('Какой тип телефона вы хотите?', 'Выберите тип телефона');
$phoneSelect->addItem('Смартфон','smartphoneSelect')
			->addItem('Обычный телефон','featurephoneSelect');

// Смартфоны

$smartphoneSelect = new SelectBox('Какой смартфон вам нужен?','Выберите модель смартфона');
$smartphoneSelect->addItem('Samsung Galaxy Nexus')
				 ->addItem('iPhone 4S','iphoneSelect')
				 ->addItem('Samsung Galaxy S2')
				 ->addItem('HTC Sensation');

// Обычные телефоны

$featurephoneSelect = new SelectBox('Какой телефон вам нужен?','Выберите модель телефона');
$featurephoneSelect->addItem('Nokia N34')
				   ->addItem('Sony Ericsson 334')
				   ->addItem('Motorola');

// Цвет iPhone

$iphoneSelect = new SelectBox('Какой цвет аппарата вам нравится?','Выберите цвет');
$iphoneSelect->addItem('Белый')->addItem('Черный');

// Выбор ноутбука

$notebookSelect = new SelectBox('Какой ноутбук вы хотите купить?', 'Выберите модель ноутбука');
$notebookSelect->addItem('Asus Zenbook','caseSelect')
			   ->addItem('Macbook Air','caseSelect')
			   ->addItem('Acer Aspire','caseSelect')
			   ->addItem('Lenovo Thinkpad','caseSelect')
			   ->addItem('Dell Inspiron','caseSelect');

// Планшет

$tabletSelect = new SelectBox('Какой планшет является предметом вашей мечты?', 'Выберите модель планшета');
$tabletSelect->addItem('Asus Transformer','caseSelect')
			 ->addItem('Samsung Galaxy Tab','caseSelect')
			 ->addItem('iPad 16GB','caseSelect')
			 ->addItem('iPad 32GB','caseSelect')
			 ->addItem('Acer Iconia Tab','caseSelect');

// Сумка

$caseSelect = new SelectBox('Возьмёте защитный чехол к вашему аппарату?','');
$caseSelect->addItem('Да')->addItem('Нет');


// Регистрируем все пункты выбора в массиве

$selects = array(
	'productSelect'			=> $productSelect,
	'phoneSelect'			=> $phoneSelect,
	'smartphoneSelect'		=> $smartphoneSelect,
	'featurephoneSelect'	=> $featurephoneSelect,
	'iphoneSelect'			=> $iphoneSelect,
	'notebookSelect'		=> $notebookSelect,
	'tabletSelect'			=> $tabletSelect,
	'caseSelect'			=> $caseSelect
);

Выше приведенный код определяет несколько элементов выбора и размещает их в массиве $selects. Когда скрипт получает запрос AJAX, он просматривает данный массив и возвращает ответ:

ajax.php / 3

// Будем просматривать данный массив и возвращать выбранный объект в зависимости
// от парметра $_GET передаваемого jQuery

// Вы можете модифицировать код для выбора результата из таблицы

if(array_key_exists($_GET,$selects)){
	header('Content-type: application/json');
	echo $selects]->toJSON();
}
else{
	header("HTTP/1.0 404 Not Found");
	header('Status: 404 Not Found');
}

Вызывая метод toJSON() мы выводим все данные для элементов выбора в формате JSON, который используется клиентской частью jQuery.

Метод jQuery.getJSON()

Если вы ожидаете с сервера ответ в виде JSON, то лучше всего использовать именно этот метод. В принципе этот метод аналогичен методу $.get() у которого в качестве значения параметра dataType установлено значение «JSON».

JavaScript

//Получаем список пользователей в виде JSON строки
$.getJSON( ‘/user_json.php’, function( data ) {
var users = [];
$.each( data, function( key, val ) {
users.push( «<li id='» + key + «‘>» + val + «</li>» );
});
});

1
2
3
4
5
6
7

//Получаем список пользователей в виде JSON строки

$.getJSON(‘/user_json.php’,function(data){

varusers=;

$.each(data,function(key,val){

users.push(«<li id='»+key+»‘>»+val+»</li>»);

});

Подключение jQuery 3-й версии

В случае, если вы решили использовать AJAX на основе jQuery 3-й версии, вам необходимо подключить полную версию этой библиотеки, актуальную на момент создания вами скрипта. Например:

Подключение jQuery 3.4.1

1
2
3

<!—илитак—>

Далее вам необходимо будет создать саму форму, т.к. в скрипте вы будете получать данные из определенных полей, которые будут иметь свои атрибуты , или , которые затем вы будете использовать при обработке события отправки формы на сервер ().

Напутствие по выбору

jQuery.post( url [, data ] [, success ] [, dataType ] )Возвращает: jqXHR

Описание: Загружает данные с сервера при помощи HTTP POST запроса.

- url
  Тип:
  
  Строка с URL адресом, на который будет отправлен запрос.
- data
  Тип: или
  
  Объект или строка, которые будут отправлены на сервер вместе с запросом.
- success
  Тип: ( data, textStatus, jqXHR )
  Функция обратного вызова, которая выполняется если запрос успешно завершается. Требуется если указан аргумент , но может быть задан как в таком случае.
- dataType
  Тип:
  
  Тип данных ожидаемый от сервера. По умолчанию: распознается по полю Content-Type заголовка ответа сервера, поддерживаются: xml, json, script, text, html.
Ассоциативный массив с настройками Ajax запроса. Все параметры опциональны, исключая url. Значения по умолчанию могут быть установлены при помощи метода $.ajaxSetup(). Смотрите подробнее описание всех возможных параметров на странице jQuery.ajax( settings ). Тип запроса автоматически будет установлен в значение POST.

Это сокращенная Ajax функция, которая эквивалентна следующему коду:

1
2
3
4
5
6
7

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

Начиная с jQuery 1.5, в функцию также передается (в jQuery 1.4 и ранее, передавался объект ).

В большинстве случаев обработчик success указывают:

1
2
3

В это примере полученный из запроса HTML код вставляется в элемент на странице.

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

Объект jqXHR

Начиная с jQuery 1.5, все Ajax методы jQuery возвращают объект . Объект jQuery XHR или «jqXHR,» возвращается реализацией интерфейса Promise и предоставляет все его свойства, меоды и повередени Promise в целом (смотрите Deferred object для справки). Методы (успех), (ошибка), and (для гарантированного обработчика, не зависимо от успеха или ошибки ответа, добавлен в версии jQuery 1.6) принимают функцию, которая вызывается когда запрос завершается. Аргументы этих функция описаны на странице в разделе справки.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Уведомление об устаревании

Функции обратного вызова , , and удалены в jQuery 3.0. Используйте методы , и вместо них.

Если запрос jQuery.post() возвращает код ошибки, то он будет выполнен тихо, до тех пор пока не будет вызван глобальный .ajaxError() метод. В качестве альтернативы, начина с jQuery 1.5, метод в объекте возвращаемый jQuery.post() также доступен для обработки ошибок.

Ввод в поле с телефоном только цифр с помощью jQuery-плагина

Для того чтобы уменьшить количество проверок и упростить ввод телефона с клавиатуры, мы воспользуемся плагином Input Mask Plugin For Phone Numbers, который создает нам маску для ввода только цифровых символов. Мы уже подключили его при создании html-разметки нашего файла строкой

Подключение плагина для маски телефона

1	<script src=»js/jquery-input-mask-phone-number.min.js»></script>

А в js-файле в самом верху запишем очень простой код для использования этого плагина:

Использование jQuery-плагина для маски телефонных номеров

$(‘input’).usPhoneFormat({
format: ‘(xxx) xxx-xxxx’,
});

1
2
3

$(‘input’).usPhoneFormat({

format'(xxx) xxx-xxxx’,

});

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

Ниже вы найдете ссылки на плагин, использованный в нашем примере, и другие плагины, которые позволяют работать с телефонными номерами и датами.

Ссылка на документацию jQuery Ajax
Ссылка на плагин для проверки телефонного номера 1
Ссылка на плагин для проверки телефонного номера 2
Ссылка на плагин для проверки телефонного номера 3

Библиотеки

Одним из ключевых факторов, способствовавших развитию Web-разработки на основе AJAX, стало появление и внедрение нескольких высокофункциональных JS-библиотек. За исключением опытных JS-разработчиков мало кто в действительности понимал, как работают технологии, формирующие AJAX. Поэтому, хотя многие аспекты интерактивности и анимации внутри Web-браузера в эпоху DHTML были доведены почти до предела возможного, сложность использования AJAX привела к большому разрыву между потребностями в Web-сайтах с AJAX-возможностями и количеством людей, способных создавать такие интерфейсы с нуля. Библиотеки, подобные Prototype, Dojo и jQuery, помогли преодолеть этот разрыв, предоставив готовую функциональность, которая позволила реализовать анимацию и интерактивность, преодолеть различия между Web-браузерами и сгладить недостатки базового JavaScript API.

Делаем запрос POST с помощью метода $.post()

В то время как метод позволяет делать запросы AJAX с помощью метода HTTP GET, метод реализует запросы с помощью метода HTTP POST. Синтаксис вызова аналогичен методу .

Например, изменим нашу демонстрацию с передачей прогноза погоды из предыдущего урока на использование метода :

$.post( "getForecast.txt", data, success, "json" );

Пробуем запустить демонстрацию и получаем такое же окно, как и в предыдущем уроке.

Метод HTTP POST обычно используется для отправки данных формы. Причина заключается в том, что позволяет отправлять небольшие объемы данных (обычно несколько сот символов), а метод POST может пересылать столько данных, сколько вам нужно. Поэтому, если требуется переслать большой объем данных в запросе AJAX, используйте метод .

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование метода .load()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function() {
	  $( "button" ).click(function() { // задаем функцию при нажатиии на элемент <button>
	    $( "div" ).load( "test.php", function( response, status, xhr ) { // с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div>, и вызываем функцию обратного вызова
	      console.log( response ); // строка соответствующая данным, присланным от сервера
	      console.log( status ); // строка соответствующая статусу запроса
	      console.log( xhr.status ); // числовой код состояния ответа от сервера
	      console.log( xhr.statusText ); // сообщение о состоянии ответа
	    })
	  })
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<br><br>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery метода .load() мы при нажатии на элемент <button> (кнопка) с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div>. Загружаемый файл («test.php») содержит следующий HTML код:

<h1>Заголовок первого уровня</h1>
<p>Обычный параграф</p>

Кроме того, мы в качестве параметра метода .load() задаем функцию обратного вызова, которая выводит в консоль браузера следующую информацию:

Строка соответствующая данным, присланным от сервера.
Строка соответствующая статусу запроса (в нашем случае success).
Свойство status объекта XMLHTTPRequest, содержащее числовой код состояния ответа от сервера (в нашем случае 200)
Свойство statusText объекта XMLHTTPRequest, содержащее сообщение о состоянии ответа, которое вернулось от HTTP сервера (в нашем случае OK).

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

Пример использования jQuery метода .load()

Рассмотрим пример, в котором мы загрузим и вставим лишь необходимую часть документа, а не весь документ.

<!DOCTYPE html>
<html>
	<head>
		<title>Загрузка фрагмента документа методом .load()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function() {
	  $( "button:first" ).click(function() { // задаем функцию при нажатиии на первый элемент <button>
	    $( ".content" ).load( "test.html" ) // полностью загружаем страницу
	  })
	  $( "button:last" ).click(function() { // задаем функцию при нажатиии на последний элемент <button>
	    $( ".content" ).load( "test.html .first" ) // загружаем фрагмент страницы (содержимое элемента с классом .first)
	  })
	});
		</script>
	</head>
	<body>
		<button>All</button>
		<button>First</button>
		<div class = "content"></div>
	</body>
</html>

В этом примере с использованием jQuery метода .load() мы при нажатии на определенный элемент <button> (кнопка) с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div> с классом .content. При нажатии на первую кнопку мы загружаем весь документ, а при нажатии на вторую лишь его часть (элемент с классом .first ). Загружаемый файл («test.html») содержит следующий HTML код:

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8">
		<title>Тестовая страница</title>
	</head>
	<body>
		<div class = "first">
			Первый блок
			<script>
				alert("hello world");
			</script>
		</div>
		<div class = "second">
			Второй блок
		</div>
	</body>
</html>

Обратите внимание, на важный момент, что в первом случае (при загрузке всего документа) скрипт, размещенный в элементе с классом .first срабатывает, а во втором (при загрузке фрагмента документа) не срабатывает, не смотря на то, что скрипт размещен в этом фрагменте. Результат нашего примера:

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

Пример загрузки фрагмента документа методом .load()jQuery AJAX

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование метода .ajaxSuccess()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $( "div" ).load( "test.php" ); // с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div>
	  });
	  $( document ).ajaxSuccess(function( event, xhr, options, data ){ // добавляем обработчик события
	    if ( options.url == "test.php" ) // если в объекте, содержащим настройки AJAX запроса ключ url содержит значение test.php
	      $( "span" ).text( "it's ajaxSuccess" ); // то добавить в элемент  <span> текстовое содержимое
	    console.log( data ); // выводим информацию в консоль браузера о данных, которые будут отправлены на сервер.
	  })
	});
		</script>
	</head>
	<body>
		<button>Клик</button><span></span>
		<br><br>
		<div></div>
	</body>
</html>

<h1>Заголовок первого уровня</h1>
<p>Обычный параграф</p>

Мы с использованием метода .ajaxSuccess() задаем функцию (обработчик события), которая вызывается в том случае, если AJAX запрос завершился успешно. Функция производит проверку на наличие в объекте, содержащего настройки AJAX запроса ключа «url», который содержит значение test.php. Если содержит, то в элемент <span> с использованием метода .text() производит добавление текстового содержимого. Кроме того, мы выводим в консоль браузера информацию о данных, которые будут отправлены на сервер.

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

Пример использования jQuery метода .ajaxSuccess()jQuery AJAX

5 последних уроков рубрики «PHP»

Когда речь идёт о безопасности веб-сайта, то фраза «фильтруйте всё, экранируйте всё» всегда будет актуальна. Сегодня поговорим о фильтрации данных.

Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак

В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение

В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

Подборка PHP песочниц
Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

Ошибки при AJAX-запросах

К сожалению, не все бывает так радужно с первого раза. Довольно часто в консоли вы можете наблюдать 500-ю ошибку (Internal Server Error). Как правило, она возникает тогда, когда есть ошибки в PHP-коде.

Например, эта возникла, когда в 4-й строке вместо знака стоял знак в записи ) . Не хватало всего-навсего угловой скобки, но это та синтаксическая ошибка, которая не дает выполнить скрипт.

Узнать подробнее об ошибках вы можете из файла error_log, который автоматически формируется на сервере в той папке, где произошла ошибка.

Ошибка в PHP-коде

PHP

PHP Parse error: syntax error, unexpected ‘=’, expecting :: (T_PAAMAYIM_NEKUDOTAYIM) in /ajax/php/test-ajax.php on line 4

1	PHP Parse errorsyntax error,unexpected’=’,expecting::(T_PAAMAYIM_NEKUDOTAYIM)inajaxphptest-ajax.php on line4

Кроме того, у вас может возникнуть 403 ошибка в том случае, если доступ к каким-то файлам или папкам на сервере у вас ограничен.

Особенности AJAX-запросов в jQuery 3-й версии

В официальной документации по вы найдете информацию о том, что функции , и заменены на , и .

ajax в jQuery v3

Однако, код, приведенный выше с использованием функций и вполне работоспособный: запрос отправляется и ответ от сервера возвращается. Происходит это потому, что данные функции являются свойствами объекта , а не его методами. Deprecated (устаревшими) являются методы изменения состояния AJAX , и для объекта JQuery XML HTTP Request (jqXHR), которые действительно устарели.

Тем не менее, вы можете перейти к рекомендуемым функциям и несколько переделать код js-файла таким образом:

if ($(‘input»]:checked’).length == 0) {
alert(«Выберите хотя бы один пункт!»);
return false;
}
$.ajax({
url: testForm.attr(‘action’),
type: ‘POST’,
data: testForm.serialize(),
dataType: ‘html’,
beforeSend: function() {
$(‘.loader’).show();
}
}).done(function(result) {
$(«.small-width tbody»).html(result);
}).always(function() {
$(‘.loader’).hide();
});
return false;
});
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$(document).ready(function(){

let testForm=$(‘#testForm’);

testForm.submit(function(){

if($(‘#username’).val().length<5){

alert(«Введите не менее 5 символов!»);

$(‘#username’).focus();

returnfalse;

}

if($(‘#useremail’).val().length<5){

alert(«Введите не менее 5 символов!»);

$(‘#useremail’).focus();

returnfalse;

}

if($(‘input»]:checked’).length==){

alert(«Выберите хотя бы один пункт!»);

returnfalse;

}

$.ajax({

urltestForm.attr(‘action’),

type’POST’,

datatestForm.serialize(),

dataType’html’,

beforeSendfunction(){

$(‘.loader’).show();

}

}).done(function(result){

$(«.small-width tbody»).html(result);

}).always(function(){

$(‘.loader’).hide();

});

returnfalse;

});

})

Второй пример с использованием функций и (открыть в новой вкладке):

Обратите внимание, что синтаксис этих функция несколько иной, т.к. используется технология промисов, которая позволяет назначать несколько обратных вызовов для одного запроса, например, так:. Вызов нескольких функций done()

JavaScript

var somerequest = $.ajax({ ..

});
somerequest.done(function(data) { /* Код 1 */ });
somerequest.done(function(data) { /* Код 2 */ });

Вызов нескольких функций done()

JavaScript

var somerequest = $.ajax({ … });
somerequest.done(function(data) { /* Код 1 */ });
somerequest.done(function(data) { /* Код 2 */ });

1
2
3

varsomerequest=$.ajax({…});

somerequest.done(function(data){/* Код 1 */});

somerequest.done(function(data){/* Код 2 */});

Так что выбор способа описания функций остается за вами.

Еще один пример использования метода jQuery вы можете найти в статье «Ajax-запросы с помощью jQuery 3-й версии и модального окна Bootstrap 4».