rpilot62.ru() :: Шпаргалка jQuery

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

Запрос html-данных с помощью функции Load

Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с id=»result» (содержимое элемента заменяется):

$(‘#result’).load(‘<url-адрес>’);

Более продвинутый вариант использования load:

$(‘#result’).load(‘<url-адрес>’, {par1:val1, par2:val2, …}, function(response, status, xhr) { if (status == ‘success’) { alert(‘Готово’); } else { alert(‘Ошибка: ‘ + xhr.status + ‘ ‘ + xhr.statusText); } });

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

Ajax-запросы функциями GET и POST

Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.

$.get( ‘<url-адрес>’, // адрес отправки запроса {par1:val1, par2:val2, …}, // передача с запросом каких-нибудь данных function(data) { // какие-то действия с полученными от сервера данными data } );

Передача данных не обязательна, как и выполнение каких-либо действий после получения ответа от сервера, т.е. в этом случае, строчки 3 и 4-6 можно удалить при необходимости и таким образом еще сократить код.

Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) — по-умолчанию определяется автоматически.

Использование post аналогично, но в следующем примере использую вызов функции после получения ответа от сервера.

$.post( ‘<url-адрес>’, {par1:val1, par2:val2, …}, onSuccess ); function onSuccess(data) { // какие-то действия с полученными от сервера данными data }

На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.

Получение 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[i].text); } }).error(function(xhr, textStatus, errorThrown) { alert(‘Ошибка: ‘ + textStatus+’ ‘+errorThrown); });

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

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

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

Простой ajax-запрос через jQuery с помощью функции AJAX

Теперь приведу пример простого get запроса функцией ajax и получением html-данных.

$.ajax({ url: ‘<url-адрес>’, dataType: ‘html’, success: function(data) { // какие-то действия с полученными данными data } });

Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.

Более сложный пример ajax-запроса через jQuery

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

$.ajax({ url: ‘<url-адрес>’, type: ‘post’, data: ‘<отправляемые_данные>’, // можно строкой, а можно, например, так: $(‘input[type=»text»], input[type=»radio»]:checked, input[type=»checkbox»]:checked, select, textarea’) dataType: ‘json’, beforeSend: function() { $(‘#sendajax’).button(‘loading’); }, complete: function() { $(‘#sendajax’).button(‘reset’); }, success: function(json) { // какие-то действия с полученными данными }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + «\r\n» + xhr.statusText + «\r\n» + xhr.responseText); } });

Кнопка отправки данных:

<button class=»btn btn-primary» data-loading-text=»Отправка…» id=»sendajax» type=»button»>Отправить</button>

В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка…» и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной). Ответ получается в виде json-данных.

Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

url Адрес отправки ajax-запроса
type Способ отправки запроса GET или POST
data Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&…, объект jQuery, например, $(‘input[type=»text»]’) или другие данные.
dataType Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
cache Кэширование браузером запроса (false — не кэшировать).
async Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
processData Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false.

Например, при отправке изображения на сервер или xml-данных.

contentType Тип передаваемых данных, по умолчанию «application/x-www-form-urlencoded; charset=UTF-8».

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

beforeSend Функция, выполняемая перед отправкой ajax-запроса.
complete Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
success Функция, выполняемая при удачном выполнении запроса.
error Функция, выполняемая в случае ошибки.

Ниже приведу еще несколько примеров использования ajax-запросов.

Отправка формы со всеми данными ajax-запросом через jQuery

Примерный код html-формы:

<form id=»myform» action=»» method=»POST»> <label for=»user_name»>Ваше имя:</label> <input name=»user_name» value=»» type=»text» /> <input type=»submit» value=»Отправить»> </form>

JavaScript код:

$(‘#myform’).submit(function(e) { e.preventDefault(); $.ajax({ type: $(this).attr(‘method’), url: ‘<url-адрес>’, data: $(this).serialize(), async: false, dataType: «html», success: function(result){ alert(‘Форма отправлена’); } }); });

Для того чтобы страница не перезагружалась при нажатии на кнопку «submit», сначала отменяем стандартые действия браузера использовав e.preventDefaults().

В параметре data мы передаем все поля формы использовав $(this).serialize() — эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.

Так же, здесь использован параметр async: false, чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.

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

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

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’)[0].files; var form = new FormData(); form.append(‘upload’, files[0]); $.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){ $(‘#addphoto span’).html(‘Загрузить изображение’); $(‘#load_file’).val(»); }, success: function(data){ alert(‘Готово’); }, 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-а с файлом устанавливается пустым, чтобы можно было снова выбирать новый файл.

Ситуаций, в которых можно и даже нужно использовать ajax-запросы, очень много и все их здесь не разобрать. Тем не менее, если есть предложения, какие еще примеры имеет смысл сюда добавить, пишите в комментариях.

 

Категория: JavaScript + jQuery

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

Разработка кода для JavaScript для реализации AJAX с нуля является весьма трудоемким и нудным процессом.

Однако множество библиотек JavaScript, включая jQuery, имеют отличную высокоуровневую реализацию AJAX в виде набора методов и функций, которые облегчают и ускоряют построение веб сайтов.

В данной серии уроков мы рассмотрим основы построения запросов AJAX с помощью jQuery. Будут раскрыты следующие темы:

  • Что такое технология AJAX? Как она работает? В чем ее преимущества?
  • Как выполнить различные типы запросов AJAX с помощью jQuery?
  • Отправка данных на сервер с помощью запросов AJAX.
  • Обработка и выделение данных из ответов AJAX с сервера.
  • Как настроить обработку AJAX в jQuery и изменить установки по умолчанию?

Примечание: Уроки сконцентрированы на части JavaScript клиентской стороны. Но разработка серверной части также достаточно проста. Для более полной информации следует изучить материалы по языкам программирования серверной стороны, например PHP.

Уроки по AjaxСтатьи по Ajax

Что такое Ajax?


Ajax — это подход к построению интерактивных пользовательских интерфейсов web-приложений, разработанный на javaScript, который в фоновом режиме (без перезагрузки всей страницы, как в PHP) позволяет обмениваться данными между браузером и сервером.

Подробнее

 

Обмен данными в Ajax

Для осуществления обмена данными на странице создаётся объект XMLHttpRequest. Он используется для взаимодействия между клиентским Браузером и Сервером. Объект XMLHttpRequest позволяет отправить запрос на сервер и получить от него ответ в виде определённых данных.

Подробнее

 

 

Создаём объект XMLHttpRequest

Вот мы подошли к самой функции создания объекта XMLHttpRequest. Сразу хочу сказать — абсолютно все популярные браузеры (IE7+, Firefox, Chrome, Safari и Opera) имеют встроенный объект XMLHttpRequest.

Подробнее

 

Синхронная и асинхронная передача данных в Ajax

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

Подробнее

 

Пример работы Ajax и txt-файла

После пройденных уроков пора перейти и к примерам! В этом уроке рассмотрим примеры работы асинхронной и синхронной передачи данных в Ajax на примере txt-файлов.

Подробнее

 

Пример работы Ajax и PHP с демонстрацией

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

Подробнее

 

Введение в AJAX

Последнее обновление: 31.10.2015

AJAX (Асинхронный JavaScript и XML) представляет собой технологию гибкого взаимодействия между клиентом и сервером. Благодаря ее использованию мы можем осуществлять асинхронные запросы к серверу без перезагрузки всей страницы. Правда, в настоящее время все больше вместо формата XML используется формат JSON для взаимодействия между клиентом и сервером.

Применительно к ASP.NET MVC использование AJAX вылилось в целую концепцию под названием «ненавязчивого AJAX» и ненавязчивого JavaScript (unobtrusive Ajax/JavaScript). Смысл этой концепции заключается в том, что весь необходимый код JavaScript используется не на самой веб-странице, а помещается в отдельные файлы с расширением *.js. А затем с помощью тега мы а веб-станице ссылаемся на данный файл кода.

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

Настройка ненавязчивого JavaScript/ AJAX

Во-первых, соответствующие настройки должны быть указаны в файле Web.config:

<appSettings> <add key=»webpages:Version» value=»2.0.0.0″ /> <add key=»webpages:Enabled» value=»false» /> <add key=»PreserveLoginUrl» value=»true» /> <add key=»ClientValidationEnabled» value=»true» /> <add key=»UnobtrusiveJavaScriptEnabled» value=»true» /> </appSettings>

Во-вторых, нам надо подключить соответствующие файлы JavaScript:

@Scripts.Render(«~/scripts/jquery-1.7.1.js») @Scripts.Render(«~/scripts/jquery.unobtrusive-ajax.js»)

Первый файл — общая библиотека jQuery.

Второй файл (jquery.unobtrusive-ajax.js) подключает к приложению функциональность Ajax-хелперов, например, Ajax-форм. Главное не забыть, подключить основную библиотеку jQuery перед остальными файлами, так как все остальные скрипты, как правило, зависят от нее.

AJAX-хелперы

Для осуществления ajax-запросов в ASP.NET MVC присутствует такая функциональность, как ajax-хелперы:

Хелпер

Описание

Ajax.ActionLink

Создает гиперссылку на действие контроллера, по нажатию на которую происходит ajax-запрос к этому действию

Ajax.RouteLink

Похож на хелпер Ajax.ActionLink, только ссылка создается на определенный маршрут, а не на действие контроллера

Ajax.BeginForm

Создает html-форму, которая отправляет ajax-запросы к определенному действию определенного контроллера

Ajax.BeginRouteForm

Похож на Ajax.BeginForm, только ajax-запросы направляются не к действию контроллера, к по определенному маршруту

Ajax.GlobalizationScript

Создает ссылку на скрипт, который содержит информацию о культуре

Ajax.JavaScriptStringEncode

Кодирует строку для использования в JavaScript

Наиболее часто используются Ajax.ActionLink и Ajax.BeginForm, поэтому далее мы рассмотрим эти хелперы.

НазадСодержаниеВперед

Аякс (Αίας), в греческой мифологии имя двух участников Троянской войны; оба воевали под Троей как соискатели руки Елены. В "Илиаде" они часто выступают рука об руку, в битве за стену, окружающую ахейский лагерь, в обороне кораблей, в сражении за тело Патрокла и сравниваются с двумя могучими львами или быками (Гомер, Илиада, XIII 197-205; 701-708).


Аякс и Кассандра, 1886 год,
художник Йозеф Соломон

Аякс Оилид (Αίας Oιλνιος), сын Оилея и Эриопиды (Эриопы), царь Локриды, предводитель ополчения в сорок человек из Локриды, области средней Греции. Искусный копьеметатель и прекрасный бегун, уступающий в скорости только Ахиллу. Его воины славятся как лучники и пращники. Этот, так называемый "малый Аякс", — не столь могуч и не столь высок ростом по сравнению с Аяксом Теламонидом (Гомер, Илиада, II 527-535). Он известен своим буйным и дерзким нравом. Так, во время взятия Трои он совершил насилие над Кассандрой, искавшей защиты у алтаря Афины (Аполлодор, V 22; Вергилий, Энеида, II 403-406). По совету Одиссея ахейцы собирались за это святотатство побить Аякса камнями (Павсаний, X 31, 2), но тот нашёл убежище у алтаря той же Афины. Однако при возвращении флота из-под Трои разгневанная богиня разбила бурей у Кикладских островов ахейские корабли (в т.ч. корабль Аякса, метнув в него молнию). Аякс спасся и, уцепившись за скалу, похвалялся, что он жив вопреки воле богов. Тогда Посейдон расколол трезубцем скалу, Аякс упал в море и погиб. Тело его было погребено Фетидой на острове Миконос, вблизи Делоса (Гигин, Fab. 116). Святотатство Аякса по решению оракула жители Локриды искупали в течение тысячи лет, посылая в Трою ежегодно двух дев, которые прислуживали в храме Афины, никогда не покидая его. Согласно Аполлодору и Полибию, этот обычай прекратил свое существование после Фокидской войны в 4 веке до нашей эры.

Аякс Теламонид (Αίας Τελαμώνιος), ведет свой род от Зевcа и нимфы Эгины. Он — внук Эака, сын Теламона и Перибеи, двоюродный брат Ахилла.

Имя его связано с мифом, в котором фигурирует Геракл как друг саламинского царя Теламона. Во время посещения острова Саламин Геракл обращается с мольбой к Зевсу даровать Теламону доблестного сына; когда Зевс в знак согласия с просьбой Геракла посылает в виде знамени орла, Геракл советует Теламону назвать будущего сына именем Аias (от греч. aietos — орел; Аполлодор, III 12 7). Аякс Теламонид — царь Саламина, приведший под Трою двенадцать кораблей (Гомер, Илиада, II 557-558). Под Троей Аякс прославился как герой, уступающий в доблести только Ахиллу. Он огромен ростом (так называемый "большой Аякс"), грозен, могуч, вооружен громадным семикожным щитом, покрытым медью. Аякс выступает в бою как сам бог Арес, шагает крепко, потрясая мощным копьем. Он мечет в Гектора огромнейший камень и пробивает им щит врага. При появлении Аякса, несущего свой щит как башню, троянцы разбегаются в испуге, а он продолжает разить врагов, бушуя на равнине.


Аякс Великий разлучается с Текмессой и Еврисаком,
античная фреска

Когда убит Патрокл и происходит борьба за его тело, Аякс своим щитом прикрывает поверженного, а затем помогает ахейцам унести с поля боя тело Патрокла, отражая вместе с Аяксом Оилидом троянцев. В битве у кораблей Аякс противостоит Гектору. Защищая корабль от огня, он убивает в рукопашной схватке двенадцать троянцев. После гибели Ахилла Аякс самоотверженно защищает от троянцев его тело и поэтому считает себя вправе унаследовать доспехи убитого героя. Однако доспехи присуждаются (причем судьями выступают троянцы или союзники ахейцев) Одиссею, и оскорбленный Аякс решает перебить ночью ахейских вождей. Но Афина, спасая ахейцев, насылает на него безумие и жертвой меча Аякса становятся стада скота. Когда рассудок возвращается к Аяксу, он не может пережить навлеченного им на себя позора и, обманув бдительность своей жены Текмессы и соратников, в отчаянии кончает жизнь самоубийством. Тело Аякса по решению Агамемнона не было предано огню, и его могилой стал Ретейский мыс (Аполлодор, V 6). Аякс не может забыть нанесенного ему Одиссеем оскорбления даже в аиде, где на приветливые речи Одиссея он отвечает мрачным молчанием, сохраняя и в царстве мёртвых непреклонный и упорный дух (Гомер, Одиссея, XI 541-565). Судьбе Аякса, его безумию и смерти посвящены трагедия Софокла "Аякс" и не дошедшая до нас трилогия Эсхила "Спор об оружии".

Аякс Теламонид почитался как герой. На агоре в городе Саламине находился храм Аякса (Павсаний, I 35, 3). Перед битвой у Саламина, как сообщает Геродот, греки принесли молитвы богам и призвали на помощь Аякса и его отца Теламона. Праздник аянтии в честь Аякса справлялся с большой торжественностью в Аттике и на Саламине. Близость Аякса к Афинам подчеркнута в "Илиаде", где говорится, что рядом с кораблями афинян Аякс поставил свои корабли.

Аякс Оилид и Аякс Теламонид относятся к очень древним мифологическим образам. Это необузданные и гордые герои, идущие не только против воли людей, но и против воли богов. Вероятно, что исконно оба Аякса составляли один целостный мифологический образ, который в дальнейшем претерпел определенную модификацию, представ в виде двух очень близких по своему духу и отличающихся скорее внешними чертами героев (Аякс большой и Аякс малый, Афаретиды, Диоскуры, Близнечные мифы). Может быть, Локрида и есть древнейшая родина героического архетипа, а Саламин — вторичен и появился в мифе через Теламона. Имя Теламон имеет характер нарицательный (на древнегреческом языке telamon, ремень или перевязь для щита и меча), и Аякс Теламонид выступает как обладатель знаменитого щита, удерживаемого крепкими ремнями. Частое совместное выступление обоих Аяксов в "Илиаде" также позволяет сделать предположение о первоначально едином образе Аякса.


Царство Флоры и Самоубийство Аякса, 1631 год,
Картинная галерея, Дрезден, автор Никола Пуссен

В античном искусстве Аякс Оилид изображается главным образом на монетах на Локриды, где он предстаёт в облике тяжеловооруженного воина, в вазописи (сцена насилия над Кассандрой), на фресках. Миф об Аяксе и Кассандре послужил сюжетом картин Питера Пауля Рубенса, Йозефа Соломона и других художников.
Аякс Теламонид — один из наиболее популярных персонажей. В вазописи воплощены различные сюжеты мифа: "Спор из-за доспехов Ахилла", "Самоубийство Аякса", "Поединок Аякса с Гектором и другими троянцами", "Участие Аякса в битве за тело Ахилла" и т.п. В европейском изобразительном искусстве извесны картины "Царство Флоры" Никола Пуссена, статуя "Аякс" Антонио Кановы и другие произведения.

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

Добавить комментарий

Закрыть меню