Размещение данных в сервлете 3.0 с помощью jQuery 2.0.3

Question

Размещение данных в сервлете 3.0 с помощью jQuery 2.0.3

0

Я пытаюсь создать веб-приложение, которое должно вызывать сервлет со страницы jsp благодаря функции jQuery $.post(...) и публиковать результаты на той же странице. До сих пор мне не повезло, даже после поиска в Интернете. Будучи нобом, я, вероятно, что-то делаю неправильно, но я не могу понять, что.

Мне удалось оптимизировать проблему в следующем MWE. Сервлет в моем Test проекте выглядит так:

@WebServlet("/servlet")
public class Servlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
        throws ServletException, IOException {
            doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
        throws ServletException, IOException {
            String temp = request.getParameter("param");
            request.setAttribute("result", temp);
            RequestDispatcher view = request.getRequestDispatcher("/index.jsp");
            view.forward(request, response);
    }
}

Если мой index.jsp является следующим, веб-приложение работает так, как ожидалось:

<%@ page language="java" import="java.util.*"
    contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
    <p>Result: ${result}</p>
    <form method="post" action="/Test/servlet">
        <input name="param" value="value" />
        <button type="submit">Send!</button>
    </form>
</body>
</html>

Если я развожу свое веб-приложение в контейнер Tomcat 7.0.47, на самом деле, я получаю страницу с Result: поле ввода, инициализированное value и Send! кнопка. Если я нажму кнопку, сервлет правильно достигнут в /Test/servlet а затем на странице появится Result: value. Однако в моем проекте я должен использовать функцию jQuery $.post(...) для отправки параметров сервлету и возврата атрибутов, поэтому я заменил index.jsp следующим кодом:

<%@ page language="java" import="java.util.*"
    contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    function send() {
        var value = $('#field').val();
        alert('Sending: ' + value);
        $.post('/Test/servlet', {
            param : value
        }, function(result) {
            alert('Done!');
        }, 'html');
    }
</script>
</head>
<body>
    <p>Result: ${result}</p>
    <form action="/">
        <input id="field" value="value" />
        <button type="button" onclick="send()">Send!</button>
    </form>
</body>
</html>

На этот раз, если я разворачиваю веб-приложение, и я нажимаю кнопку, я получаю два окна сообщений. Первый сообщает Sending: value (что означает, что jQuery 2.0.3 правильно разрешен) и второй Done! , Очевидно, что страница не обновляется, чтобы отразить Result: value. Поскольку сервлет не был изменен, я подозреваю, что сервлет неправильно разрешен. Поэтому я попытался заменить /Test/servlet: /Test/servlet/, Test/servlet/, Test/servlet, /servlet/, /servlet, servlet/ и servlet, без везения. Я заметил, однако, что я не получаю Done! сообщение (например, я использую /servlet или подобное).

Итак, чтобы сделать вывод, что я делаю неправильно? Можете ли вы объяснить мне, что происходит на заднем плане, чтобы помочь мне понять? Заранее спасибо!

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

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

Вот как я переработал приведенный выше код, чтобы получить рабочий пример. Код сервлета остается неизменным, а второй - последней строкой метода doPost(...) который теперь читает:

RequestDispatcher view = request.getRequestDispatcher("/results.jsp");

Затем я разделил указанную выше страницу на две отдельные части. Первый - index.jsp который автоматически загружается контейнером, когда пользователь запрашивает адрес веб-приложения:

<%@ page language="java" import="java.util.*"
    contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    function send() {
        $.post('/Test/servlet', {
            param : $('#field').val()
        }, function(result) {
            $("#result").html(result);
        }, 'html');
    }
</script>
</head>
<body>
    <form>
        <input id="field" value="value" />
        <button type="button" onclick="send()">Send!</button>
    </form>
    <div id="result">
        <p>Result: --</p>
    </div>
</body>
</html>

Обратите внимание, что форма более или менее такая же, как и раньше, но теперь есть <div id="result"> который содержит значение по умолчанию для result. Другое отличие заключается в функции send() где /Test/servlet вызывается для вычисления result; этот result затем вводится в приведенный выше <div id="result"> после отправки! нажата кнопка. Как я показал выше, сервлет перенаправляет запрос в ответ на results.jsp который просто:

<p>Result: ${result}</p>

Теперь, когда пользователь нажимает кнопку Send! , значение входного поля передается сервлету в качестве параметра, сервлет преобразует параметр в аргумент и пересылает его на заданную страницу. Когда эта страница интерпретируется, ожидаемое сообщение (Result: value) составлено и возвращается в index.jsp где оно включено в <div id="result"> и, наконец, становится видимым.

Интересно, можно ли сделать $.post(...) точно так же, как в первом методе, без объявления <div id="result"> непосредственно внутри <body>. Заранее благодарим за любое предложение или идею выполнить это любопытство.

Stefano Bragaglia 10 нояб. 2013, в 15:01

Источник

Теги:

javascript

jquery

jsp

servlets

post

1 ответ

Ещё вопросы

coding_idiot · Accepted Answer · 2013-11-10T15-29-00.000Z

function (result) {alert ('Done!'); }, },

Возвращенный результат (ответ) не используется и, следовательно, вы не видите результат. Вы можете сделать что-то вроде этого:

Добавьте тег с некоторым id в ваш html
Поместите ответ от сервера в этот тег.

Например

<div id="result"></div>

Изменить javascript на

 function(result) {
     $("#result").html(result);
         },