在Spring MVC中使用ajax

Question

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

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

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

Answer 1

这是非常简单的，我甚至不认为需要进行个别辅导（除了从一个普通的弹簧MVC一个）。

1. 做一个@RequestMapping("/foo")方法返回一个List<Foo>
2. 有<mvc:annotation-driven />在dispatcher-servlet.xml激活的处理器映射和转换器
在classpath
3. 使用$.getJSON("/foo", function(data) {..});（jQuery的）
4. 认沽杰克逊（JSON序列化） - 你将得到您的Foo对象的JSON编码列表

Spring wi会检测到浏览器请求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 = "/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> 

进口jQuery库在jsp页面

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