Как организовать обновление части страницы в jsp?

Question

[parkito]

Здравствуйте. Помогите, пожалуйста, решить проблему.
Есть jsp страница - index.jsp. Она состоит из двух (через jsp include) header.jsp и непосредственного содержания index.jsp. В header.jsp выводится некторое число

<p class="list-group-item-text text-overflow">I spend ${userPayment} RUB per month</p>

В index.jsp это число можно изменить (через сервлет, который в свою очередь записывает данные в сессию, а header.jsp из сессии это число читает ). Но для того чтобы это измененное число отобразилось в header.jsp нужно перейти на другую страницу, а потом вернуться. Так просто оно не изменится (не помогает обновление). Я думаю это из-за того, что браузер кеширует header.jsp . Как можно отключить это кеширование, чтобы при обновлении страницы обновлялся и header.jsp ?

UPD

Часть header.jsp

<div class="popover-content">
                    <div class="list-group">
                        <a href="userTariffs" class="list-group-item">
                            <h4 class="list-group-item-heading text-overflow">
                                <i class="fa fa-fw fa-envelope"></i> My scope
                            </h4>
                            <p class="list-group-item-text text-overflow">I spend ${userPayment} RUB per month</p>
                        </a>
                    </div>
                    <div style="padding:10px"><a class="btn btn-success btn-block" href="userTariffs">Show me
                        more...</a></div>
                </div>

ajax

function popBox() {
                                            x = confirm('Are you sure? ');
                                            if (x == true) {
                                                var xhr = new XMLHttpRequest();
                                                xhr.open("POST", "userChangeTariff?sum=" + par1, false);
                                                xhr.send();

Контроллер

@RequestMapping(value = "/userChangeTariff", method = RequestMethod.POST)
    public String changeTariff(HttpServletRequest req, Locale locale, Model model,
                               @RequestParam(value = "sum") String sum) {
        req.getSession().setAttribute("userPayment", ++sum);
        return "user/userTariffs";
    }

Comments

[sirs]

Покажите запрос на изменение и обработчик этого запроса(контроллер), если это ajax то заодно и js код показывайте

[parkito]

sirs: Посмотрите, пожалуйста, UPD

Answer 1

[sirs]

return "user/userTariffs"; Означает отправить user на эту страницу, Вы делаете ajax запрос и контроллер ни на какую страницу юзера не отправляет. Для того, чтобы информация обновилась на странице, как Вы хотите, Вам нужно эту информацию передать из контроллера на сервере в браузер клиента в респонсе, аннотация @ResponseBody и на клиенте использую js обновить html страницу.
Передать в респонсе можно кусок html, xml, json, можно просто передать String, главное, чтобы js код, который будет обрабатывать респонс понимал чего ему ожидать от сервера.
Самый просто вариант для вашего случая:

@RequestMapping(value = "/userChangeTariff", method = RequestMethod.POST)
@ResponseBody
    public Integer changeTariff(HttpServletRequest req,
                               @RequestParam(value = "sum") Integer sum) {
        final Integer newSum = new Integer(sum+1);
        req.getSession().setAttribute("userPayment", );
        return newSum;
    }

На клиенте сделать:

<div class="popover-content">
                    <div class="list-group">
                        <a href="userTariffs" class="list-group-item">
                            <h4 class="list-group-item-heading text-overflow">
                                <i class="fa fa-fw fa-envelope"></i> My scope
                            </h4>
                            <p class="list-group-item-text text-overflow">I spend <span id="user_payment_sum">${userPayment}</span> RUB per month</p>
                        </a>
                    </div>
                    <div style="padding:10px"><a class="btn btn-success btn-block" href="userTariffs">Show me
                        more...</a></div>
                </div>

function popBox() {
             x = confirm('Are you sure? ');
               if (x == true) {
              var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        alert(xhr.responseText);  //TODO test alert
document.getElementById('user_payment_sum').innerHTML =xhr.responseText;
    }
}
              xhr.open("POST", "userChangeTariff?sum=" + par1, false);
             xhr.send();

Обратите внимание, что я добавил <span id="user_payment_sum">, в которой лежат те данные, которые мы хотим динамически менять по ajax запросу на сервер и секцию if (xhr.readyState == XMLHttpRequest.DONE) {, которая ожидает ответ и выполняет некие действия, когда приходит респонс.

P. S. Мой совет Вам учить основы: как работаю клиент-серверные приложения, как работет servlet, jsp, session, ajax и только потом браться за фреймворки. Просто делая по образцам из интернета - не научитесь, однажды будет такая задача, примера который в интернете не будет попросту.
P. P. S. Код не запускал, написал просто по памяти, возможно какие-то ошибки.

Comments

[parkito]

Спасибо!