Как получить post данные jquery. Простой запрос Ajax с помощью jQuery и PHP

Не могу никак отправить простейший запрос к сервлету средствами 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); } }

Структура проекта .

Уже достаточно давно многие сайты обладают динамическими страницами, то есть они обновляются без перезагрузки. Это достигается путём обращений к серверу через JavaScript , в большинстве случаев, это POST и GET запросы . И практически всегда такие сайты используют для этого Ajax . И далеко не все знают (к сожалению), что Ajax - это не отдельный язык, а всего лишь библиотека JavaScript . Вывод: Ajax - это лишь удобный способ отправить POST-запросы , но всё это можно сделать и без его помощи. Вот как отправить POST-запросы через JavaScript без Ajax , я расскажу в этой статье.

Мы с Вами сейчас решим классическую задачу - это суммирование двух чисел, заданных пользователем. То есть мы с Вами считаем из текстовых полей 2 числа, отправим их на сервер, получим ответ и выведем на страницу. И всё это без перезагрузки страницы .

Начнём с простого: написание PHP-кода :

Здесь всё элементарно, поэтому даже не буду комментировать. А вот теперь более сложная часть - клиентская:


/* Данная функция создаёт кроссбраузерный объект XMLHTTP */
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function summa() {
var a = document.getElementById("a").value; // Считываем значение a
var b = document.getElementById("b").value; // Считываем значение b
var xmlhttp = getXmlHttp(); // Создаём объект XMLHTTP
xmlhttp.open("POST", "test.php", true); // Открываем асинхронное соединение
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Отправляем кодировку
xmlhttp.send("a=" + encodeURIComponent(a) + "&b=" + encodeURIComponent(b)); // Отправляем POST-запрос
xmlhttp.onreadystatechange = function() { // Ждём ответа от сервера
if (xmlhttp.readyState == 4) { // Ответ пришёл
if(xmlhttp.status == 200) { // Сервер вернул код 200 (что хорошо)
document.getElementById("summa").innerHTML = xmlhttp.responseText; // Выводим ответ сервера
}
}
};
}









Сумма равна:


HTML-код я комментировать не буду, поскольку он совершенно прозрачный. А вот к JavaScript я немного добавлю, несмотря на подробные комментарии. Во-первых, функция getXmlHttp() является универсальной. Вы её можете смело копировать в свои скрипты. Её задача вернуть такой XMLHTTP , чтобы он работал в любом браузере. Потому что самый популярный вариант - это new XMLHttpRequest() , однако, он не работает, например, в IE6 . Другие варианты также не являются универсальными, поэтому здесь мы просто подбираем под любой браузер рабочий вариант.

Я написал также в комментариях про "асинхронную работу ". Есть ещё синхронный вариант. Отличие только в том, что в синхронном пока не будет получен ответ от сервера, браузер работать не будет , он просто повиснет. Мне трудно придумать такую задачу, где это необходимо, поэтому я сразу написал асинхронный вариант. Он работает следующим образом: мы отправляем запрос и ждём ответа, но при этом браузер не виснет . А когда ответ приходит (xmlhttp.readyState == 4 ), то мы сразу обрабатываем ответ. Вот это и есть асинхронный вариант работы, он чуть-чуть сложнее, но только его и нужно использовать (за исключением очень редких случаев).

Вот таким способом отправляются POST-запросы через JavaScript . Как видите, Ajax нам вовсе не потребовался. И я настоятельно рекомендую, если у Вас всего пару запросов на весь сайт, то даже не думайте использовать эту тяжеловесную библиотеку, а используйте материал данной статьи.

Когда я начинал использовать JavaScript и JQuery, то был разочарован отсутствием простых примеров использования Ajax в jQuery.

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

Пример запроса GET, отправленного с помощью jQuery и Ajax:

$.ajax({ type: "GET", url: "test.php", success: function(data){ alert(data); } });

В примере кода передаются три параметра:

  • type : тип HTTP запроса. В этом примере я отправляю запрос GET. Если вы хотите отправить запрос POST, измените “GET” на “POST”.
  • url : адрес,на который вы хотите отправить Ajax запрос. В нашем случае это страница “test.php”. Помните, что URL-адрес указывается относительно текущей страницы.
  • success : функция, которая вызывается, если запрос был успешным. Она принимает параметр data, который будет содержать вывод страницы test.php. То есть, если test.php выводит строку “OK”, то параметр data будет содержать строку “OK”.

Поэкспериментируйте с приведённым выше кодом. Например, замените“GET” на “POST” и измените URL-адрес. Можно использовать инструменты разработчика, встроенные в Firefox / Chrome для отладки Ajax- запросов. Они доступны на вкладке «Сеть». Инструменты разработчика позволяют визуализировать запрос.

Что если мы захотим добавить параметры запроса GET к Ajax-запросу?

$.ajax({ type: "GET", url: "test.php", data: {name:"Wayne"}, success: function(data){ alert(data); } });

Я добавил новый параметр data. Это объект JavaScript, содержащий данные, которые передаем в запросе. Поскольку мы отправляем запрос GET, эти параметры будут автоматически добавлены к строке запроса: test.php?name=Wayne

Пример добавления нескольких параметров GET:

$.ajax({ type: "GET", url: "test.php", data: {name: "Wayne", age: 27, country: "Ireland"}, success: function(data){ alert(data); } });

Приведенный выше код отправит запрос GET к test.php?name=Wayne&age=27&country=Ireland

Поэкспериментируйте с кодом, чтобы разобраться в нём. Попробуйте добавлять и удалять параметры, чтобы понять, как отправлять данные с помощью jQuery и Ajax.

А если мы хотим отправить запрос POST к файлу submission.php ?

$.ajax({ type: "POST", url: "submission.php", data: {name:"Wayne", age: 27}, success: function(data){ alert(data); } });

Я изменил тип метода (с GET на POST) и URL-адрес (на submission.php). В этом примере параметры name и age будут отправлены как переменные POST. Это означает, что на странице submission.php их можно получить с помощью следующего кода:

$name = $_POST["name"]; $age = $_POST["age"];

Если использовать запрос GET, то переменные будут отправлены через строку запроса. Обратиться к ним можно следующим образом:

$name = $_GET["name"]; $age = $_GET["age"];

Последней частью паззла является функция success() . Она вызывается, если Ajax-запрос завершается успешно. В примере, приведенном выше, я вывожу результат в сообщении. Но в большинстве случаев вы будете использовать эту функцию для отображения уведомлений на странице. Например, если пользователь отправляет форму с помощью Ajax, тогда эта функция применяется для проверки ответа. А также для вывода сообщения о том, что данные формы успешно отправлены на сервер.

Надеюсь, эта статья помогла вам разобраться с основами Ajax-запросов!

Данная публикация представляет собой перевод статьи «Simple Ajax request example with JQuery and PHP » , подготовленной дружной командой проекта

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

Метод 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); }); });

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

В отличие от GET-запросов данные POST-запросов передаются не в строке запроса, а в его теле. Распространенным примеров подобных запросов является отправка данных формы на сервер.

Для отправки POST-запросов предназначен метод post . Его объявление и использование в целом аналогично методу get. Он принимает следующие параметры:

    url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос

    data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом

    success(data, textStatus, jqXHR) : необязательный параметр - функция обратного вызова, которая будет выполняться при успешном выполнении запроса. Она может принимать три параметра: data - данные, полученные с сервера, textStatus - - статус запроса и jqXHR - специальный объект jQuery, который представляет расширенный вариант объекта XMLHttpRequest .

    dataType: необязательный параметр, содержащий тип данных в виде строки, например, "xml" или "json"

На выходе метод post возвращает объект jqXHR .

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

$.post("ajax.php", {"login":"1111", "password" : "2222"}, function(data) { $("#news").html(data); });

В данном случае мы передаем в качестве данных пароль и логин. На сервере мы можем получить данные и отправить ответ пользователю:

Поскольку наиболее часто запрос 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"] .

Похожие статьи