Spring MVC：在進行AJAX調用後在對話框中顯示數據

Question

我是Spring和web技術的新手。

我有一個表，其中包含一個超鏈接列。當我點擊一行的超鏈接時，我需要在對話框中顯示行數據以及其他細節。我的控制器方法返回一個ModelAndView，其中包含我需要顯示的數據和顯示頁面。

問題：

1. 如何顯示的對話框？和

2. 如何將數據傳遞給對話框？

Table.jsp

<script type="text/javascript"> 
    function showDialog(ref, date) { 

     $ajax({ 
      type: "POST", 
      url: "/example/show.htm", 
      data: { 
       ref: ref, 
       date: date 
      } 
      success: function(data) { 

      }, 
      error: function(data) { 

      } 
     }); 
} 
</script> 

映射

@RequestMapping(value = "show.htm", method=RequestMethod.POST) 
    public ModelAndView show(@RequestParam("ref") String ref, @RequestParam("date") String date, 
      HttpServletRequest request, HttpServletResponse response) { 

     ModelAndView modelAndView = new ModelAndView(); 

     try { 
      SampleDTO SampleDTO = new SampleDTO(); 
      sampleDTO.setDate(sdf.parse(date)); 
      sampleDTO.setRef(ref); 

      SampleDTO billDto = // server call     modelAndView.addObject("showBill", sampleDto); 

      modelAndView.setViewName("Dialog"); 
     } 
     return modelAndView; 
    } 

Answer 1

你的代碼是錯誤的，你搞亂的東西，如果你想使用jQuery和ajax調用，那麼不要在您的Spring控制器中不使用ModelAndView。取而代之的是，使用以下和return您bean或dto爲json使用Jackson庫從Java：

http://www.java2s.com/Code/JarDownload/jackson/jackson-all-1.9.9.jar.zip

Java代碼：

在lib項目文件夾中包含此jar：

@RequestMapping(value = "businessBill.htm", method = RequestMethod.POST) 
@ResponseBody 
public String handleBusinessBillDetails(@RequestParam("reference") String billReference, @RequestParam("invoiceDate") String billDate, 
      HttpServletRequest request, HttpServletResponse response) { 

    String json = null;   

    try { 

     //1. Create 'jackson' object mapper 
     ObjectMapper objectMapper = new ObjectMapper(); 

     BusinessBillDTO businessBillDTO = new BusinessBillDTO(); 
     businessBillDTO.setBillDate(sdf.parse(billDate)); 
     businessBillDTO.setBillReference(billReference); 

     BusinessBillDTO billDto = accountStatementBO.getBusinessBillDetails(businessBillDTO); 

     //2. Convert your 'bean' or 'dto' as 'json' string 
     json = objectMapper.writeValueAsString(billDto);    

    } catch (Exception ex) { 
     LOGGER.error(ex); 
    } 
    return json; 
} 

然後，在Table.jsp投入使用Dialog.jsp的div爲hidden，這將是你modal對話框中的未來（注意，是在span標籤的一些變化也）：

<div id="BusinessBill" style="display:none;"> 
    <h2>Bill Details</h2> 
    <em>Business Ltd</em> 
    <div class="row"> 
     <span class="spanAsLabel">Account number</span> 
     <span id="dlg-account-number" class="spanAsLabel"></span> 
    </div> 
    <div class="row"> 
     <span class="spanAsLabel">Bill date</span> 
     <span id="dlg-bill-date" class="spanAsLabel"></span> 
    </div> 
</div> 

現在解決您的getBusinessBill(..)方法是這樣的：

你也可以使用$.ajax，也許處理更多的狀態，如onerror等，但這種方式更簡單（至少對我而言，你只需要ev aluate如果返回data是null與否，讓知道user的 - 如果null - 這事發生在server端，也許顯示了與通用的消息的alert） - 請閱讀評論。

function getBusinessBill(billReference, billInvoiceDate) { 

    $.post("/AccountStatement/businessBill.htm", { 
     reference: billReference, 
     invoiceDate: billInvoiceDate 
    }, function (data) { 

     /* You can implement more validations for 'data', in my case I just used these 'if' conditionals but can vary. */ 

     if(data != null) { //returned 'data' is not 'null' 

      /* parse 'data' as 'json' object 
      * will be good to console.log(data) and take a look. */ 
      var obj = $.parseJSON(data); 

      if(obj != {}) { //check if 'data' is not an empty 'json' object once transformed 

       //set the 'data' in the dialog 
       $('#dlg-account-number').text(obj.accountNumber); 
       $('#dlg-bill-date').text(obj.billDate); 

       /* open modal dialog, you can simulate it this way (for this case) 
       * but the correct way is to use 'jquery-ui' dialog or any plugin you prefer. 
       * At this point you will see the hidden 'div' in a visible way with your 'data'. 
       */ 
       $('#BusinessBill').fadeIn(); 
      } else { 
       //show 'generic' message 
       alert('No results found.'); 
      } 
     } else { 
      //show 'generic' message 
      alert('An error occurred, try again.'); 
     } 
    }); 

} 

最後，如果一切正常，你將在同一頁面（Table.jsp）的modal對話框，您data，全部由一個ajax呼叫作出見避免重定向頁面，如（Table.jsp到=>Dialog.jsp） 。