Ajax post параметры. Java - Отправка ajax post запроса к сервлету - Stack Overflow на русском

Метод post() , как правило, предназначен для отправки данных на сервер (например из формы).

К контексте метода post стоит упомянуть о json - текстовый формат, основанный на javascript. Может использоваться практически любым языком программирования.

jQuery, Ajax запрос методом POST jQuery.post(url,,,)

• Первый аргумент(url) – это url-адрес документа, куда отправляется запрос;
• Второй аргумент(data) – это данные, отсылаемые на сервер, как правило, представленные в виде объекта js;
• Третий аргумент(callback(data, textStatus, jqXHR)) – это ф-я, вызываемая после ответа сервера. В качестве аргументов данная функция принимает данные отправленные сервером в ответ на запрос и статус того, как был выполнен запрос.

json_decode() и json_encode()

В языке PHP (от 5.2), поддержка JSON включена в ядро в виде функций json_decode() (декодирует JSON строку) и json_encode() , которые сами преобразуют типы данных JSON в соответствующие типы PHP и наоборот.

Результат {"a":1,"b":2,"c":3,"d":4,"e":5} PHP пример работы функции json_decode $json = "{"a":1,"b":2}"; var_dump(json_decode($json, true)); $arr = json_decode($json, true); echo "
".$arr["a"]. "
".$arr["b"]. "
"; Результат array(5) { ["a"] => int(1) ["b"] => int(2) } 1 2 Пример работы Ajax запроса методом POST

Что мы будем делать:
Проверяем на корректность отправленные (POST-запросом AJAX) данные (данные вводятся пользователем). Если данные корректны, выводим сообщение. В ином случае делаем красную подсветку у полей. Все работает асинхронно, то есть без перезагрузки страницы. Вы можете использовать данный принцип, например, чтобы создать систему комментариев с вставкой комментариев в базу данных.

jQuery $(document).ready(function(){ var working = false; /* Данный флаг предотвращает отправку нескольких комментариев: */ $("form").submit(function(e){ e.preventDefault(); if(working) return false; working = true; $("#submit").val("Подождите.."); $(".error").removeClass("error"); $.post("submit.php",$(this).serialize(),function(msg){ /* Отправляем значения формы в submit.php: */ working = false; $("#submit").val("Отправить"); if(msg.status) // Если данные корректны, добавляем сообщение { console.log(msg.status); $(msg.html).hide().insertBefore("form").slideDown(); } else { // Если есть ошибки, проходим циклом по объекту // msg.errors и выводим их на страницу $.each(msg.errors,function(k,v){ $("#"+k).addClass("error"); //alert(k); }); } },"json"); }); }); HTML Введите число Введите email PHP // принимаем данные пришедшие посредством ajax $arr = $_POST; $arr = $_POST; if(filter_var($arr, FILTER_VALIDATE_EMAIL) && filter_var($arr, FILTER_VALIDATE_INT)) { echo json_encode(array("status"=>1,"html"=>"Спасибо, ваши данные точны")); // информация возвращаемая сервером } else { if(filter_var($arr, FILTER_VALIDATE_EMAIL) == false) { $errors["email"] = "Пожалуйста, введите имя."; } if(filter_var($arr, FILTER_VALIDATE_INT) == false) { $errors["intt"] = "Пожалуйста, введите имя."; } $arr = $errors; /* Вывод сообщений об ошибке */ echo "{"status":0,"errors":".json_encode($arr)."}"; }

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

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

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

$("#result").load("");

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

$("#result").load("", {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("", // адрес отправки запроса {par1:val1, par2:val2, ...}, // передача с запросом каких-нибудь данных function(data) { // какие-то действия с полученными от сервера данными data });

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

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

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

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

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

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

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

$.getJSON("", {par1:val1, par2:val2, ...}).success(function(data) { // что-то делаем с данными, например, обходим их в цикле и выводим: for (var i=0; i 10, "text" => "тестовая строка 1"); $arr = array("id" => 20, "text" => "тестовая строка 2"); $arr = array("id" => 30, "text" => "тестовая строка 3"); echo json_encode($arr);

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

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

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

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

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

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

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

$.ajax({ url: "", type: "post", data: "", // можно строкой, а можно, например, так: $("input, input:checked, input: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, сначала меняется состояние кнопки (текст на ней меняется на "Отправка..." и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на "Отправить", становится активной). Ответ получается в виде json-данных.

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

url	Адрес отправки ajax-запроса
type	Способ отправки запроса GET или POST
data	Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&..., объект jQuery, например, $("input") или другие данные.
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-формы:

Ваше имя:

JavaScript код:

$("#myform").submit(function(e) { e.preventDefault(); $.ajax({ type: $(this).attr("method"), 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 фишки: выбор файла по нажатию на кнопку , которая может быть оформлена как угодно, и отображение прогресса при передаче файла на сервер ajax-запросом.

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

Загрузить изображение

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

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

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

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

jQuery функция $.post() позволяет загрузить данные с сервера с помощью HTTP запроса методом POST. Для загрузки данных с помощью HTTP запроса методом GET вы можете воспользоваться jQuery функцией $.get() .

Обращаю Ваше внимание, что функция $.post() является сокращенной версией функции $.ajax() со следующими параметрами:

$.ajax({ type : "POST " // метод HTTP, используемый для запроса url : "url ", // строка, содержащая URL адрес, на который отправляется запрос data : data, // данные, которые будут отправлены на сервер success : success , // функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно dataType : "dataType " // тип данных, который вы ожидаете получить от сервера } );

Метод GET в отличии от POST при отправке формы передает собранную информацию как часть URL:

Url?name=value&name=value // метод GET использует пары имя = значение

При отправке данных методом POST данные передаются таким образом, что пользователь уже не видит передаваемые обработчику формы данные (добавляет данные формы в теле запроса http, которые не отображаются в URL).

Обратите внимание на некоторые нюансы при работе с HTTP методами GET и POST :

• Метод GET ограничивает объём передаваемой в URL информации (около 3000 символов), метод POST не имеет подобных ограничений.
• Никогда не используйте метод GET , если вам необходимо передать конфиденциальные данные (например, пароль пользователя, так как он будет передан в строке URL - в открытом виде).
• Страница, сгенерированную методом GET , можно пометить закладкой (адрес страницы всегда будет уникальный), а страницу, сгенерированную метод POST нельзя, так как адрес страницы не изменяется (данные в URL не передаются).
• Учтите, что с использованием метода GET можно передать данные не через форму, а через URL страницы.

jQuery синтаксис: Синтаксис 1.0: $.post(url , data , success , dataType ); url - String data - PlainObject , или String success - Function (PlainObject data , String textStatus , jqXHR jqXHR ) dataType - String Синтаксис 1.12/2.2: $.post({ settings } ); // параметры запроса передаются в объекте settings - PlainObject

Страницы, загруженные функцией $.post() никогда не кэшируются, по этой причине значения параметров cache (определяет будут ли кэшироваться страницы, по умолчанию true ) и ifModified (проверяет поля заголовка Last-Modified , по умолчанию false ) jQuery функции .ajaxSetup() (устанавливает значения по умолчанию для будущих запросов AJAX ) не повлияют на эти запросы .

Добавлен в версии jQuery 1.0 Значения параметров Параметр Описание

url	Строка, содержащая URL адрес, на который отправляется AJAX запрос. Обязательный параметр.
data	Объект или строка, которые будут отправлены на сервер вместе с AJAX запросом.
success	Функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Необязательный параметр. Функция принимает следующие параметры: data - данные возвращенные с сервера. textStatus - строка описывающая статус запроса. jqXHR - объект jqXHR (до версии jQuery 1.4.x объект XMLHttpRequest ).
dataType	Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML тип MIME приведет к получению XML , с версии jQuery 1.4 json будет давать объект JavaScript , script будет выполнять скрипт, а все остальное будет возвращено в виде строки). Необязательный параметр. Доступные типы (результат передается в качестве первого аргумента в функцию обратного вызова success ): "xml" - возвращает XML документ, который может быть обработан с помощью jQuery. "html" - возвращает HTML как обычный текст, теги будут обработаны и выполнены после вставки в объектную модель документа (DOM ). "script" - расценивает ответ как JavaScript и возвращает его как обычный текст. Отключает кэширование с помощью добавления параметра к строке запроса _= , даже если парамета cache имеет значение true . Это превратит метод POST в GET для кроссдоменных запросов. "json" - расценивает ответ как JSON и возвращает объект JavaScript . Кроссдоменные "json" запросы преобразуются в "jsonp" , если в параметрах запроса не указано jsonp : false . Данные JSON парсятся в строгом порядке и должны соответствовать общепринятому формату , любой некорректный JSON отвергается и выдается ошибка. С версии jQuery 1.9, пустой ответ не принимается, сервер должен вернуть в качестве ответа NULL , или {} . "jsonp" - загружает данные в формате JSON , используя при этом формат загрузки JSONP . Добавляет дополнительный параметр "?callback=? " в конец URL адреса для указания имени функции обработчика. Отключает кэширование путем добавления параметра _= к URL адресу,даже если парамета cache имеет значение true . "text" - обычная текстовая строка. несколько значений - значения разделяются пробелом. Начиная с версии 1.5, jQuery может преобразовать тип данных, который получен в Content-Type заголовка, в тип данных, который вам требуется. Например, если вы хотите, чтобы текстовый ответ был расценен как XML, используйте "text XML" для этого типа данных. Вы также можете сделать JSONP запрос, получить его в виде текста и интерпретировать его в формате XML : "jsonp text XML" . Следующая строка позволит сделать тоже самое: "jsonp XML" , jQuery будет пытаться конвертировать из JSONP в XML , после неудачной попытки попытается преобразовать JSONP в текст, а затем из текста уже в XML .

Пример использования Пример использования jQuery функции $.post() $(document ).ready(function (){ $("form ").submit(function (){ var formData = $(this ).serialize(); // создаем переменную, которая содержит закодированный набор элементов формы в виде строки $.post("user.php ", formData , function (data ) { // передаем и загружаем данные с сервера с помощью HTTP запроса методом POST $("div ").html(data ); // вставляем в элемент данные, полученные от сервера } ) } ); } );

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

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

• url - файл, к которому мы обращаемся ("user.php "), он содержит следующий PHP код: