Не могу никак отправить простейший запрос к сервлету средствами 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); } }
Структура проекта .
Метод 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 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 страницы.
Страницы, загруженные функцией $.post() никогда не кэшируются, по этой причине значения параметров cache (определяет будут ли кэшироваться страницы, по умолчанию true ) и ifModified (проверяет поля заголовка Last-Modified , по умолчанию false ) jQuery функции .ajaxSetup() (устанавливает значения по умолчанию для будущих запросов AJAX ) не повлияют на эти запросы .
Добавлен в версии jQuery 1.0 Значения параметров| url | Строка, содержащая URL адрес, на который отправляется AJAX запрос. Обязательный параметр. |
| data | Объект или строка, которые будут отправлены на сервер вместе с AJAX запросом. |
| success | Функция обратного вызова, которая вызывается если AJAX
запрос выполнится успешно. Необязательный параметр.
Функция принимает следующие параметры:
|
| dataType | Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML
тип MIME
приведет к получению XML , с версии jQuery 1.4 json
будет давать объект JavaScript
, script
будет выполнять скрипт, а все остальное будет возвращено в виде строки). Необязательный параметр.
Доступные типы (результат передается в качестве первого аргумента в функцию обратного вызова success ):
|
В этом примере мы привязываем JavaScript обработчик событий "submit" (обработчик отправки формы), который срабатывает в момент отправки (в нашем случае заполненной ) формы при нажатии на элемент с типом submit (кнопка для отправки формы).
Кроме того, мы создаем переменную, которая содержит закодированный набор элементов формы в виде строки - результат выполнения метода .serialize() . После этого с использованием jQuery функции $.post() выполняем асинхронный AJAX запрос со следующими параметрами:
- url
- файл, к которому мы обращаемся ("user.php
"), он содержит следующий PHP код:
В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.
Для данного примера вам понадобится создать базу данных school и таблицу students . Таблица student содержит поля с именами, порядковым номером и адресом.
Надеюсь, эта статья будет вам полезна.
