Использование ajax с Spring MVC

Question

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

IE. Пользователь нажимает кнопку, переходит к контроллеру «what.do», получает список и отображает этот список безнеобходимость перезагрузить эту страницу.

В любом случае, кто-нибудь знает какие-нибудь хорошие учебные пособия или примеры проектов?

Answer 1

Это очень просто, я даже не думаю, что нужен специальный учебник (кроме стандартного spring-mvc).

1. Создайте метод @RequestMapping("/foo"), который возвращает List<Foo>
2. В вашем dispatcher-servlet.xml есть <mvc:annotation-driven /> для активации сопоставлений обработчиков и преобразователей
3. Поместите Джексона (сериализатор json) в ваш путь к классам
4. Используйте $.getJSON("/foo", function(data) {..}); (jquery)- вы получите JSON-кодированный список ваших Foo объектов

Spring обнаружит, что браузер запрашивает ответ json, и преобразует ваши объекты с помощью Jackson.

Answer 2

http://blog.springsource.com/2010/01/25/ajax-simplifications-in-spring-3-0/

http://krams915.blogspot.com/2011/01/spring-mvc-3-and-jquery-integration.html

Answer 3

@RequestMapping(value = "/retrivebyid/{id}", method = RequestMethod.GET)
    public @ResponseBody String retriveUser(@PathVariable long id, Model model,HttpServletRequest request) {
        String jsonresp = null;
        try {
            List<CustomerDO> customerList = new CustomerService().retriveById(id);
            jsonresp = CustomerUtil.getCustomerList(customerList).toString();
        } catch (Exception e) {}

        if (jsonresp != null) {
            return jsonresp.toString();
        } else {
            return null;
        }
    }

    public static JSONObject getCustomerList(List<CustomerDO> empList)throws AppException {
        JSONObject responseJSON = new JSONObject();
        JSONObject resultJSON = new JSONObject();
        try {
            resultJSON.put(CommonConstants.SUCCESS_FLAG, CommonConstants.TRUE);
            resultJSON.put(CommonConstants.ERRORS, "");
            JSONArray resultJSONArray = new JSONArray();
            for (CustomerDO customer : empList) {
                resultJSONArray.put(getCustomerDetailObject(customer));
            }
            resultJSON.put(CommonConstants.RESULTS, resultJSONArray);
            responseJSON.put(CommonConstants.RESPONSE, resultJSON);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return responseJSON;
    }

    private static JSONObject getCustomerDetailObject(CustomerDO customer)throws JSONException, AppException {
        JSONObject result = new JSONObject();
        result.put(CommonConstants.ID, String.valueOf(customer.getId()));
        result.put(CommonConstants.CUSTOMER_NAME, String.valueOf(customer.getName()));
        return result;
    }

Answer 4

var id = $("#id").val();
                    var resourceURL = $("#contextpath").val()+"/customer/retrivebyid/"+id;
                    $.ajax({
                        url : resourceURL,
                        type : 'GET',
                        dataType : 'json',
                        async : false,
                        success: function(data) {
                            var successflag = data.response.successflag;
                            var errors = data.response.errors;
                            var results = data.response.result;
                            if(successflag == "true"){
                                $.each(results, function (i, result) {
                                    $("#id").val((result.id == undefined || result.id == null || result.id.length <= 0) ? "-" : result.id);
                                    $("#name").val((result.customername == undefined || result.customername == null || result.customername.length <= 0) ? "-" : result.customername);
                                }); 
                            }else{
                                $("#errorMsgContent").html(errors);
                                $.fancybox.open('#errorMsg');
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            $("#errorMsgContent").html(thrownError);
                            $.fancybox.open('#errorMsg');
                        }
                    });

Answer 5

ваш контроллер должен иметь следующий формат при использовании с пружиной вместе с ajax:

@RequestMapping(value = "/show.ajax", method = RequestMethod.POST)
public @ResponseBody List<your object type> your_method_name() {

     //code logic

return list_of_your_object;
}

также ваш код java-скрипта на странице jsp в следующем формате:

<script>
    function your_javascript_fun_name() {
            $.ajax({
                type : 'POST',
                url : 'show.ajax',//this is url mapping for controller
                success : function(response) {
                    alert(response);
                                 //this response is list of object commming from server
                },
                error : function() {
                    alert("opps error occured");
                }
            });
        }
</script>

импорт библиотеки jquery на странице jsp

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>