我是Spring和Web技术的新手.
我有一个表,其中包含一个带超链接的列.当我单击行的超链接时,我需要在对话框中显示行数据以及其他详细信息.我的控制器方法返回一个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调用,那么不要在你的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中将Dialog.jsp中使用的div设置为隐藏,这将是您以后的模态对话框(请注意,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和其他状态,但这种方式更简单(至少对我来说,你只需要评估返回的数据是否为null,让我们知道用户 – 如果为null – 那在服务器端发生的事情,可能会显示带有通用消息的警报) – 请阅读评论.
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)上看到与您的数据的模态对话框,所有这些都是通过ajax调用来避免重定向页面,如(Table.jsp to => Dialog.jsp).
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。