Как получить post данные jquery. Ajax запрос методом POST, пример с использованием json_encode. Получение json-данных с помощью getJSON
Метод jQuery.post() выполняет HTTP POST-запрос для получения данных с сервера.
Синтаксис метода jQuery.post()jQuery.post(url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ])
- url - строка, содержит URL запроса, для отправки данных.
- data - строка или Plain-объект (ассоциативный массив), данных для отправки на сервер.
- success(data, textStatus, jqXHR) - функция обратного вызова, вызывается если запрос успешен.
- dataType - строка, тип данных ожидаемые от сервера. По умолчанию, jQuery пытается определить автоматически (xml, json, script или html).
Пример ниже, эквивалент jQuery.post() в исполнении jQuery.ajax():
$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });
В функцию обратного вызова success передаются возвращаемые данные, которые могут быть корневым элементов XML, строкой text, JavaScript-файлом или JSON-объектом, в зависимости от MIME-типа ответа. Также передается текстовый статус ответа.
Начиная с версии jQuery 1.5 в функцию success передается jqXHR-объект.
В большинстве реализация обработчик success задается следующим образом:
JQuery.post("ajax/test.html", function(data) { $(".result").html(data); });
В этом примере запрашивается HTML-код и вставляется на страницу, в указнное место.
Данные получаемые методом jQuery.post() никогда не кешируются, таким образом параметры cache и ifModified метода jQuery.ajaxSetup() будут игнорироваться.
jqXHR-объект.С версии jQuery 1.5 все AJAX-методы возвращают расширенный объект XMLHttpRequest. Это XHR-объект jQuery или коротко jqXHR, возвращается jQuery.post() реализуя Promise-интерфейс, предоставляя ему все свойства, методы и поведение Promise (смотрите Отложенный объект, для получения дополнительной информации). jqXHR.done() (вместо success), jqXHR.fail() (вместо error) и jqXHR.always() (вместо complete) принимают аргумент функции, которая вызывается, когда запрос завершается. Для получения информации об аргументах этой функции обратитесь в раздел документации jQuery.ajax().
Promise-интерфейс также позволяет AJAX-методам в jQuery, в том числе и JQuery.post(), создать цепочку из jqXHR.done(), jqXHR.fail(), jqXHR.always(), т.е. из нескольких методов обратного вызова на один запрос, и даже назначить эти функции, после того как запрос был завершен. Если запрос уже завершен, назначенные вновь методы будут выполнены сразу же.
// Назначаем запросы сразу же после запроса // и сохраняем jqXHR-объект этого запроса. var jqxhr = $.get("example.php", function() { alert("success"); }) .done(function() { alert("second success"); }) .fail(function() { alert("error"); }) .always(function() { alert("finished"); }); // выполняем какой-то код здесь... // Добавляем новый обработчик завершения запроса, для уже завершенного запроса jqxhr.always(function(){alert("second finished");});
Устаревшие обработчики.Методы jqXHR.success(), jqXHR.error(), jqXHR.complete() являются устаревшими с версии jQuery 1.8. В будущем эти методы будут удалены. Используйте вместо них jqXHR.done(), jqXHR.fail(), jqXHR.always(), соответственно.
Дополнительное примечание.- Из-за ограничений безопасности браузеров, большинство AJAX-запросов ограничены той же политикой безопасности. AJAX-запросы не могут успешно извлекать информацию из других доменов, поддоменов или протоколов.
- Если во время запроса jQuery.get() возникает ошибка, то это произойдет не заметно, пока не будет вызван глобальный метод jQuery.ajaxError(). Альтернативой обработки ошибок, начиная с версии jQuery 1.5, может быть jqXHR-объект, возвращаемый jQuery.get().
Пример: Выполняется запрос на страницу test.php, но не выполняется обработка данных.
JQuery.post("test.php");
Пример: Запрос на страницу test.php с отправкой некоторых данных (без обработки полученных данных).
JQuery.post("test.php", { name: "John", time: "2pm" });
Пример: Передается массив данных на сервер (без обработки полученных данных).
JQuery.post("test.php", { "choices": ["Jon", "Susan"]});
Пример: отправка данных формы используя Ajax-запрос.
JQuery.post("test.php", jQuery("#testform").serialize());
Пример: Оповещаем об успешном получении данных со страницы test.php (HTML или XML, в зависимости от полученных данных).
JQuery.post("test.php", function(data) { alert("Data Loaded: " + data); });
Пример:Оповещаем об успешном получении данных со страницы test.cgi с дополнительной отправкой данных (HTML или XML, в зависимости от полученных данных).
JQuery.post("test.php", { name: "John", time: "2pm" }) .done(function(data) { alert("Data Loaded: " + data); });
Пример: Получить содержимое страницы test.php, возвращаемые в JSON-формате (), и вывести их на страницу.
JQuery.post("test.php", function(data) { $("body").append("Name: " + data.name) // John .append("Time: " + data.time); // 2pm }, "json");
Пример: Отправка данных формы используя Ajax-запрос и вставка полученных данных в div.
// добавляем обработчик сабмита формы $("#searchForm").submit(function(event) { // запрещаем стандартный функционал обработчика формы event.preventDefault(); // получаем некоторые данные из элементов страницы var $form = $(this), term = $form.find("input").val(), url = $form.attr("action"); // отпправляем данные на сервер POST-запросом var posting = $.post(url, { s: term }); // вставляем полученные результаты posting.done(function(data) { var content = $(data).find("#content"); $("#result").empty().append(content); }); });
Не могу никак отправить простейший запрос к сервлету средствами jQuery. Но при этом, если отправляю через форму, то все работает на ура. Ниже привожу index.html, из которого хочу отправить логин пользователя. login.js, в котором формирую сам запрос, SerletStore.java сам сервлет. И структура всего проекта.
login.js Единственный более менее работающий url = "http://localhost:8080/testservlet/post ", а они "/testservlet/post", "testservlet/post", "/post," "post" вызывают ошибку 404.
Function addNewVoting() { var xhr = new XMLHttpRequest(); var body = "name=" + encodeURIComponent("name") + "&surname=" + encodeURIComponent("surname"); xhr.open("POST", "http://localhost:8080/testservlet/post", true) xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") xhr.send(body); }; function addNewVoting1() { var user = { "firstName": "vlad" } var JSONString = JSON.stringify(user); var url = "http://localhost:8080/testservlet/post"; $.ajax({ url: url, method: "post", data: JSONString, contentType: "application/json", error:function (message) { var JSONObject = JSON.parse(message); console.log(JSONObject); }, success:function (data) { var JSONObject = JSON.parse(data); console.log(JSONObject); }, headers: { "Accept":"application/json", "Accept-Language":"en", "Cache-Control":"max-age=3600" } }); };
При вызове второй функции выводит это:
index.html
Login Form
ServletStore.java
Import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; @WebServlet(name="post", urlPatterns = "/post") public class Servlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter writer = resp.getWriter(); writer.print("Hello"); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { super.doPost(req, resp); } }
Структура проекта .
Метод post() , как правило, предназначен для отправки данных на сервер (например из формы).
К контексте метода post стоит упомянуть о json - текстовый формат, основанный на javascript. Может использоваться практически любым языком программирования.
jQuery, Ajax запрос методом POST jQuery.post(url,,,)- Первый аргумент(url) – это url-адрес документа, куда отправляется запрос;
- Второй аргумент(data) – это данные, отсылаемые на сервер, как правило, представленные в виде объекта js;
- Третий аргумент(callback(data, textStatus, jqXHR)) – это ф-я, вызываемая после ответа сервера. В качестве аргументов данная функция принимает данные отправленные сервером в ответ на запрос и статус того, как был выполнен запрос.
В языке 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 это библиотека javascript, цель которой "пиши меньше, делай больше". jQuery легко подключить к сайту и начать использовать. С помощью jQuery становится намного проще использовать javascript на вашем сайте.
jQuery устраняет целую прорву строк кода javascript, и позволяет реализовать эту прорву строк всего одним методом.
Что такое AJAX?AJAX - это асинхронный (т.е. браузер, отослав запрос, может делать что угодно, например, показать сообщение об ожидании ответа, прокручивать страницу, и т.п.) JavaScript и XML. Он используется для создания динамических и быстрых веб-страниц. AJAX позволяет нам обновлять часть веб-страницы без перезагрузки страницы целиком.
Что насчет jQuery и AJAX?Комбинация jQuery и AJAX обеспечивают мощную функциональность. С помощью jquery и ajax вы можете сделать запрос и получить информацию в различных форматах, включая XML, HTML и даже обычный текст. Для обмена данными можно использовать формат JSON. Данные полученные по ajax запросу мы можем использовать в нашей html странице.
jQuery делает существующий браузерный Ajax API мощнее и проще в использовании. Создавать вызовы ajax обычным способом, используя javascript, немного затруднительно: так как вы должны учитывать, что для различных браузеров требуются разные подходы к созданию объекта XMLHttpRequest . Кроме того отправлять данные, например, из форм, становится сложнее, если вы используете обычный javascript для вызова ajax.
jQuery обеспечивает простую и мощную функциональность, которая расширяет javascript AJAX методы и обеспечивает более гибкий подход.
В этой небольшой статье я покажу вам, как использовать jQuery и AJAX в простой php форме . Давайте начнем... Чтобы использовать jQuery и AJAX нам потребуются два файла, в первом файле будет находиться код html/php, посредством которого и будет составляться ajax запрос. Во втором файле мы будет обрабатывать ajax запрос и возвращать результат на первую страницу.
Шаг 1. Создайте файл school.php и вставьте в него следующий код:В приведенном выше коде мы получаем имя и номер студента и, используя jquery и ajax, отсылаем их в details.php .
function getdetails(){ var name = $("#name").val(); var rno = $("#rno").val(); $.ajax({ type: "POST", url: "details.php", data: {fname:name, id:rno} }).done(function(result) { $("#msg").html(" Address of Roll no " +rno +" is "+result); }); }
| Your Name: | ||
| Roll Number: | ||
В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.
Для данного примера вам понадобится создать базу данных school и таблицу students . Таблица student содержит поля с именами, порядковым номером и адресом.
Надеюсь, эта статья будет вам полезна.
jQuery.post(url [, data] [, success(data, textStatus, jqXHR)] [, dataType])
url
Тип: строка
Адрес, на который отправляется запрос.
data
Тип: объект или строка
Данные, отправляемые на сервер в виде объекта (ключ:значение) или строки.
Тип: функция
Функция, вызываемая при успешном завершении Ajax запроса.
dataType
Тип: строка
Тип данных, ожидаемых в качестве ответа от сервера. По умолчанию jQuery определит сам.
Опции:
url
- адрес, на который отправляется запрос.
data
- данные, отправляемые на сервер в виде формате map (наборы ключ:значение) или string (строка)
success(data, textStatus, jqXHR)
- функция, вызываемая при успешном завершении ajax-запроса.
dataType
- Тип данных, ожидаемых от сервера. По умолчанию jQuery определит сам.
$.post() эквивалетна:
$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });
Функция обратного вызова success, принимает ответ от сервера, который может быть в виде XML, строки, JavaScript файла или объекта JSON, в зависимости от MIME типа ответа. Это значение так же помещается в статус ответа.
Начиная с версии 1.5 , функция обратного вызова success принимает объект jqXHR (в ранних версиях объект XMLHttpRequest). Классическое использование метода:
$.post("ajax/test.html", function(data) { $(".result").html(data); alert("Загрузка завершена."); });
Данный код делает запрос к HTML файлу и выводит его содержимое.
Страницы полученные в результате POST запроса не кэшируются ни при каких условиях.
Объект jqXHRНачиная с версии 1.5 , $.post() возвращает объект jqXHR, реализующий интерфейс deferred, что позволяет задавать дополнительные обработчики. Помимо стандартных для объекта deferred методов.done(), .fail() и.then(), с помощью которых можно устанавливать обработчики, в jqXHR реализованы их копии: .success(), .error() и.complete(). Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов.
// запускаем ajax-запрос, устанавливаем обработчики событий. // Возвращаемые методом $.get объект сохраним в переменной jqxhr для дальнейшего использования var jqxhr = $.post("example.php", function() { alert("success"); }) .done(function() { alert("second success"); }) .fail(function() { alert("error"); }) .always(function() { alert("finished"); }); // установим еще один обработчик завершения запроса jqxhr.always(function(){ alert("second finished"); });
Заметка об устаревших методах
Функции обратного действия, введённые в jQuery 1.5 устарени в версии 1.8 . Вместо jqXHR.success(), jqXHR.error() и jqXHR.complete() теперь следует использовать jqXHR.done(), jqXHR.fail() и jqXHR.always().
ПримерыСделать запрос к test.php, игнорируя ответ:
$.post("test.php");
Сделать запрос к test.php, передать данные, игнорировать ответ:
$.post("test.php", { name: "John", time: "2pm" });
Передать массив данных на сервер, игнорируя ответ:
$.post("test.php", { "choices": ["Jon", "Susan"]});
Обработать ответ от сервера (HTML или XML в зависимости от того, что пришло):
$.post("test.php", function(data) { alert("Data Loaded: " + data); });
Сделать запрос к test.cgi, предать данные, обработать ответ (HTML или XML в зависимости от того, что пришло):
$.post("test.cgi", { name: "John", time: "2pm" }) .done(function(data) { alert("Data Loaded: " + data); });
Получить от сервера ответ в JSON формате и вывести его на страницу ():
$.post("test.php", function(data) { $("body").append("Name: " + data.name) // John .append("Time: " + data.time); // 2pm }, "json");
Отправка формы POST запросом и отображение результата в div
$.ajax({ /* прикрепить событие submit к форме */ $("#searchForm").submit(function(event) { /* отключение стандартной отправки формы */ event.preventDefault(); /* собираем данные с элементов страницы: */ var $form = $(this), term = $form.find("input").val(), url = $form.attr("action"); /* отправляем данные методом POST */ var posting = $.post(url, { s: term }); /* результат помещаем в div */ posting.done(function(data) { var content = $(data).find("#content"); $("#result").empty().append(content); }); });
