Сначала я создаю Servlet, он не имеет никакого дополнительного кода для обработки запроса Ajax, поэтому в моем примере я получаю два параметра из запроса добавил их и возвратите String с результатом, очень просто.
@WebServlet("/CalculatorServlet")
public class CalculatorServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//Get the parameters from the request
String param1 = request.getParameter("param1");
String param2 = request.getParameter("param2");
int result = Integer.parseInt(param1) + Integer.parseInt(param2);
String responseResult = "The result is " + result;
response.setContentType("text/plain");
response.getOutputStream().write(responseResult.getBytes());
}
}
Я использую версию контейнера сервлетов 3.0, так что я могу указать информацию о адреса сервлета с аннотацией @WebServlet и мне не нужно, чтобы изменить мой web.xml.
Html очень прост, он имеет два входа для получения операндов и имеет 3 кнопки. Первый вызывает сервлет без Ajax, второй вызывает сервлет с ajax, получая параметры формы и последний вызов с помощью ajax, но он отправляет параметры с помощью json.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<fieldset>
<legend>Parameters</legend>
<form id="form1" action="CalculatorServlet" method="get">
<label for="param1" > Operand 1</label>
<input type="number" id="param1" name="param1">
<label for="" id="param2">Operand 2</label>
<input type="number" id="param2" name="param2">
<div>
<input type="submit" value="Submit without Ajax">
<input type="button" value="Submit with Ajax" id="btnCall1">
<input type="button" value="Submit param1 and 2" id="btnCall2">
</div>
</form>
</fieldset>
<script>
(function() {
$("#btnCall1").click(function() {
$.ajax({
url : "CalculatorServlet",
type: "get",
data: $("#form1").serialize(),
dataType: "text",
success: success,
error: error
});
});
$("#btnCall2").click(function() {
var param1Value = $("#param1").val();
$.ajax({
url : "CalculatorServlet",
type: "get",
data: {param1: param1Value, param2: 2},
dataType: "text",
success: success,
error: error
});
});
function success(data, textStatus, jqXHR)
{
alert(data);
}
function error(jqXHR, textStatus, errorThrown)
{
alert("error "+textStatus);
}
})();
</script>
</body>
</html>
* Замечания: * Я использую метод получить, потому что я хочу, чтобы показать ответ с не AJAX вызова, вы должны использовать POST. Я тестирую этот пример с Tomcat 7.0. Если вам нужно получить данные для сериализации для объектов (вам нужно получить объект), или для возврата и объектов, которые необходимо использовать для связи JSON, а в сервлете использовать какой-то JSON-сериализатор, я рекомендую вам GSON o Jackson, так что вы получаете параметр JSON String в качестве параметра и десериализовать в сервлете, чтобы ответить на сериализацию вашего объекта на JSON и отправить ответ, если вы отправляете JSON, вам нужно изменить атрибут данных jQuery ajax, чтобы данные: «json»
И где HTML-страница находится в проекте WTP? –
Под папкой Веб-контент –
Где находится сервлет? В папке Java Ressources? –