Как записать значение переменной Controller обратно на страницу HTML, которая отправила запрос Ajax без обновления страницы?

Question

следующий JavaScript

new Ajax.Request('/orders/check_first_last/A15Z2W2', 
{asynchronous:true, evalScripts:true, 
parameters:{first:$('input_initial').value, 
last:$('input_final').value, 
order_quantity:$('input_quantity').value}});

запускает Ajax-вызов метода checkFirstLast в OrderController:

@Controller
@RequestMapping("/orders")
public OrderController {

   @RequestMapping("/check_first_last/{code}")
   @ResponseBody
   public String checkFirstLast(@PathVariable String code, 
        @RequestParam int first, 
        @RequestParam int last, 
        @RequestParam("order_quantity") int orderQuantity)  {
       Integer newResult = new Integer(last - first);
       return newResult.toString();
  }
}

Если я хочу записать строку newResult из метода checkFirstLast в элемент HTML result_text на странице, которая отправляет запрос Ajax, заменив значение, установленное переменной initialResult JSTL:

<h2 id="result_text"><c:out value="${initialResult}"/></h2>

Какое изменение мне нужно было бы внести в метод контроллера, описанный выше (checkFirstLast), теперь, когда я уже включил библиотеку JSON в свой проект?

Answer 1

Это контроллер abstract, который я написал для обработки Ajax. Это на самом деле из Struts примера на DispatchAction.

public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
        // TODO Auto-generated method stub
        AjaxResponse ajaxResponse = null;
        String parameter = "command";

        try {
            String methodName = request.getParameter(parameter);
            Method method = getMethod(methodName);

            ajaxResponse = invokeMethod(request, response, method);         
        } catch (Exception e) {
            // TODO Auto-generated catch block
            logger.error(e.getLocalizedMessage());
            ajaxResponse = toXmlException(e);
        }

        if (ajaxResponse != null) {
            //Finally
            response.setContentType(ajaxResponse.getContentType());
            response.setHeader("Cache-Control", "no-cache");
            OutputStream out = response.getOutputStream();
            out.write(ajaxResponse.getResponseText().getBytes());
            out.flush();
        }

        return null;
    }

Как видите, на сервер отправляется javascript, который затем DispatcherServlet отправляется контроллеру. Затем контроллер invokes вызывает правильный метод и возвращает ответ через response.getOutputStream().write(....).

Затем контроллер должен вернуть null, чтобы DispatcherServlet ничего не делал взамен.

В моем случае AjaxResponse - это интерфейс, и ответ может быть либо XmlAjaxResponse, либо JsonAjaxResponse.

Затем Java-клиент обрабатывает ответ, возвращаемый сервером (в данном случае контроллером).

Вам необходимо добавить ответ в вашу сторону. Надеюсь, это поможет.

Answer 2

поток в ajax:

1. отправить запрос с javascript на сервер
2. обработка запроса на сервере
3. отправил ответ клиенту
4. обработайте ответ с помощью javascript и обновите страницу

В предоставленном вами коде отсутствует четвертый шаг.

Мне кажется, вы используете прототип javascript Framework , это правильно? Если вы посмотрите документацию для запросов ajax и параметры ajax , вы увидите, что вы можете указать функцию обратного вызова, когда запросы обрабатывались успешно или когда произошел сбой.

Измените свой JavaScript на:

new Ajax.Request(
    '/orders/check_first_last/A15Z2W2', 
    {
        asynchronous:true,
        evalScripts:true, 
        parameters:
        {
            first:$('input_initial').value, 
            last:$('input_final').value, 
            order_quantity:$('input_quantity').value
        },
        onSuccess: function(transport) 
        {
             $('result_text').update(transport.responseText);
        }
    }
);

и дайте мне знать, что это дает.