Spring MVC：在进行AJAX调用后在对话框中显示数据
我是Spring和Web技术的新手。
我有一个表，其中包含一个带超链接的列。 当我单击行的超链接时，我需要在对话框中显示行数据以及其他详细信息。 我的控制器方法返回一个ModelAndView ，它包含我需要显示的数据和显示页面。
问题：
-
如何显示对话框？ 和
-
如何将数据传递给对话框？
Table.jsp
function showDialog(ref, date) { $ajax({ type: "POST", url: "/example/show.htm", data: { ref: ref, date: date } success: function(data) { }, error: function(data) { } }); }
制图
@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; }
你的代码是错误的，你搞乱了，如果你想使用jQuery和ajax调用，那么不要在你的Spring控制器中使用ModelAndView 。 而不是那样，使用以下内容并使用Java Jackson库将bean或dto作为json ：
在你的lib项目文件夹中包含这个jar ：
http://www.java2s.com/Code/JarDownload/jackson/jackson-all-1.9.9.jar.zip
Java代码：
@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使用的div Dialog.jsp为hidden ，这将是您将来的modal对话框（请注意， span标记中也有一些更改）：
现在修复你的getBusinessBill(..)方法，如下所示：
你也可以使用$.ajax并处理更多状态，如onerror和其他状态，但这种方式更简单（至少对我来说，你只需要评估返回的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 ）上看到带有data的modal对话框，所有这些都是通过ajax调用来避免重定向页面（ Table.jsp to => Dialog.jsp ）。