将 ajax 与 Spring MVC 结合使用

Question

我目前正在使用 Spring MVC，并且我正在尝试使用 ajax 做一些事情。基本上我现在想做的就是在网页上动态显示控制器的结果。

IE 用户按下按钮，它会转到“whatever.do”控制器并获取列表并显示该列表，而无需重新加载该页面。

无论如何，有人知道任何好的教程或示例项目吗？

Answer 1

它非常简单，我什至认为不需要专门的教程（除了通用的 spring-mvc 教程）。

1. 创建一个返回 List 的 @RequestMapping("/foo") 方法，
2. 具有 在您的 dispatcher-servlet.xml 中激活处理程序映射和转换器
3. 将 Jackson（json 序列化程序）放在您的类路径上
4. 使用 $.getJSON("/foo", function(data) {..}); (jquery) - 您将获得 Foo 对象的 JSON 编码列表

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

当您与 spring 和 ajax 一起使用时，您的控制器必须采用以下格式：

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

     //code logic

return list_of_your_object;
}

jsp 页面上的 java 脚本代码也采用以下格式：

<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>

在 jsp 页面中导入 jquery 库

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

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

@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;
    }