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