我是 Spring 和网络技术的新手。
我有一个表,其中包含一个带有超链接的列。当我单击一行的超链接时,我需要在对话框中显示该行数据以及其他详细信息。我的 Controller 方法返回一个 ModelAndView
,其中包含我需要显示的数据和显示页面。
问题:
如何显示对话框?和
如何将数据传递给对话框?
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;
}
最佳答案
你的代码错了,你在搞事情,如果你想使用jQuery
和 ajax
调用然后不要使用 ModelAndView
在你的Spring
Controller 。取而代之的是,使用以下内容和 return
你的bean
或 dto
作为json
使用 Jackson
来自 Java
的图书馆:
包括这个 jar
在你的lib
项目文件夹:
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
future 的对话框(注意 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
和其他人,但这种方式更简单(至少对我而言,您只需要评估返回的 data
是否为 null
并告知 user
- if 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
)。
关于java - Spring MVC : Show data in a dialog after making an AJAX call,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17267609/