Jquery post пример data параметры. Как написать на чистом JavaScript е Ajax, get, post запросы

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 код:

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





    $("#loginForm").submit(function(event) { // Предотвращаем обычную отправку формы event.preventDefault(); $.post("ajax.php", {"login":$("#login").val(), "password" : $("#password").val()}, function(data) { $("#result").html(data); }); });

    Итак, серверная часть, к которой будет обращаться форма - файл ajax.php - у нас остается той же. Только в данном случае теперь для параметра data в методе post мы данные берем из полей на этой форме.

    Обратите внимание, что мы блокируем обычную отправку формы (event.preventDefault();), иначе у нас бы шла переадресация.

    Сериализация формы

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

    Итак, применим сеиализацию формы:





    $("#loginForm").submit(function(event) { // Предотвращаем обычную отправку формы event.preventDefault(); $.post("ajax.php", $("#loginForm").serialize(), function(data) { $("#result").html(data); }); });

    В отличие от предыдущего примера у нас здесь два отличия. Во-первых, обратите внимание, что поля для ввода имеют атрибут name . При указании параметра data мы производим сериализацию данных формы через метод serialize: $("#loginForm").serialize() . В данном методе в тело запроса передаются параметры. Причем имена параметров - это значения атрибутов name полей ввода. А значения параметров - соответственно введенные значения в текстовые поля.

    И поэтому с помощью php мы можем извлечь эти значения: $login=$_POST["login"] .

    В данной статье я расскажу, как написать на чистом JavaScript е Ajax без использования библиотек.

    Ajax - это технология, которая используется с помощью JavaScript. С помощью Ajax можно отправить GET, POST, запросы без обновления страницы.

    Для начала нам нужно понять, как работает Ajax. Ajax работает в JavaScript с помощью стандартной функции XMLHttpRequest, но в IE нужно использовать функцию ActiveXObject («Microsoft.XMLHTTP»).

    Покажу на примерах, как всё это работает.

    Начнём.

    Нужно сделать проверку Ajax объекта, чтобы сделать скрипт кроссбраузерно.

    Вот код проверки:

    Var M = {}; // Здесь мы создаём объект для создания методов и свойства. M._xhr = function(){try {this.a = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {this.a = new ActiveXObject("Microsoft.XMLHTTP");} catch (E) {this.a = false;}} if(!this.a && typeof XMLHttpRequest!="undefined") { this.a = new XMLHttpRequest();}return this.a;}
    Потом нужно сделать несколько функций для упращения кода и его удобства. Вот код:

    M._d = document; M._func = function(obj) {return Object.prototype.toString.call(obj) === ""; } M._array = function(obj) { return Object.prototype.toString.call(obj) === ""; } M._ge_by_tag = function(id){ this.p = M._d.getElementsByTagName(id); this.ct = this.p.length; this.count = 0;do{return this.p;this.count++;}while(this.count = 200 && r.status < 300) { this.text = r.responseText;if(d.onDone) d.onDone(this.text, r); else if(d.onJsonDone) d.onJsonDone(eval("("+this.text+")"),r); else if(d.onFail) d.onFail = ""; }else {alert(r.status);}}}}}
    Сейчас нужно разобраться в коде:

    R.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");r.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    Эта строка означает, что мы используем Ajax.
    Дальше.

    R.open("POST", link, true); r.send(q);
    А это обработчик открывает запрос с сервером, где send отправляет данные.
    Этот код для POST запроса, а для GET нужно немного изменить. Нужно просто не отправлять данные с помощью send. Для отправки GET запроса и его данных нужно просто в open после link прибавить вот этот "+"?"+q". Здесь мы отправляем данные в открытом виде. Например:

    R.open("GET", link+"?"+q, true); r.send(null); // Здесь напишем null. поскольку ничего не нужно отправить.
    test.php?text=hello world

    Вот с кодом всё. А теперь как использовать код.

    Вот пример:

    demo test window.onload = function(){ M.get("/test.php",{ // M.post or M.get query:{text:"hello"}, // Значение запроса onDone:function(a){ // Если всё нормально, то отобразить результат. M._ge_by_id("result").innerHTML = a; }, onFail:function(a){ // А если нет. то показать ошибку alert("Error"); } }); }
    Есть ещё возможность преобразовать результат в JSON.
    Вот код:

    В этой статье примеры кода, которые я использую, для отправки 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-запросы, очень много и все их здесь не разобрать. Тем не менее, если есть предложения, какие еще примеры имеет смысл сюда добавить, пишите в комментариях.