Spring MVC的：在对话框中显示的数据做一个AJAX调用后 [英] Spring MVC: Show data in a dialog after making an AJAX call
问题描述
我是新来春和网络技术。
我有一个包含有超链接列的表。当我点击一排的超链接，我需要显示的行数据以及在对话框中的其他细节。我的控制器方法返回一个的ModelAndView ，其中包含我需要显示的数据和显示页面。
问题：
-
如何显示对话框？以及
-
如何将数据传递到对话框？
Table.jsp
＆LT;脚本类型=文/ JavaScript的＆GT;
功能的ShowDialog（编号，日期）{
$阿贾克斯（{
键入：POST，
网址：/example/show.htm
数据： {
REF：REF，
日期：日期
}
成功：功能（数据）{
}，
错误：功能（数据）{
}
}）;
}
＆LT; / SCRIPT＆GT;
映射
@RequestMapping（值=show.htm，方法= RequestMethod.POST）
公众的ModelAndView秀（@RequestParam（参考）字符串参考，@RequestParam（日）字符串日期，
HttpServletRequest的请求，HttpServletResponse的响应）{
ModelAndView中的ModelAndView =新的ModelAndView（）;
尝试 {
SampleDTO SampleDTO =新SampleDTO（）;
sampleDTO.setDate（sdf.parse（日期））;
sampleDTO.setRef（REF）;
SampleDTO billDto = //服务器调用modelAndView.addObject（演出表，sampleDto）;
modelAndView.setViewName（对话）;
}
返回的ModelAndView;
}
您code是错误的，你搞乱的东西，如果你想使用的jQuery 和 AJAX 调用，那么不要使用的ModelAndView 在春控制器。取而代之的是，使用下面的和返回的豆或 DTO 从的Java A JSON 使用杰克逊库：
在包括这个项目文件夹： 罐 LIB
HTTP：// WWW .java2s.com / code / JarDownload /杰克逊/ jackson-all-1.9.9.jar.zip
的Java code：
@RequestMapping（值=businessBill.htm，方法= RequestMethod.POST）
@ResponseBody
公共字符串handleBusinessBillDetails（@RequestParam（参考）字符串billReference，@RequestParam（invoiceDate）字符串billDate，
HttpServletRequest的请求，HttpServletResponse的响应）{
JSON字符串= NULL;
尝试 {
// 1。创建杰克逊的对象映射器
ObjectMapper objectMapper =新ObjectMapper（）;
BusinessBillDTO businessBillDTO =新BusinessBillDTO（）;
businessBillDTO.setBillDate（sdf.parse（billDate））;
businessBillDTO.setBillReference（billReference）;
BusinessBillDTO billDto = accountStatementBO.getBusinessBillDetails（businessBillDTO）;
// 2。转换你的'豆'或'DTO为json的串
JSON = objectMapper.writeValueAsString（billDto）;
}赶上（例外前）{
LOGGER.error（前）;
}
返回JSON;
}
然后，在 Table.jsp 把 DIV 在使用Dialog.jsp 为隐藏，这将是在未来你的模式对话框（注意，有一些变化在范围标签也）：
＆LT; DIV ID =BusinessBill的风格=显示：无;＆GT;
＆LT; H2＆GT;比尔详情＆LT; / H＆GT;
＆LT; EM＆GT;经营有限公司和LT; / EM＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT;跨度类=spanAsLabel＆gt;帐户数量和LT; / SPAN＆GT;
＆LT;跨度ID =DLG账户数级=spanAsLabel＆GT;＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT;跨度类=spanAsLabel＆GT;比尔日期和LT; / SPAN＆GT;
＆LT;跨度ID =DLG出货日期级=spanAsLabel＆GT;＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
现在解决您的 getBusinessBill（..）这样的方法：
您也可以使用 $。阿贾克斯，也许处理更多的国家，如的onerror 和其他人，但这方法是简单的（至少对我来说，你只需要评估，如果返回数据是空与否，让知道用户 - 如果空 - 某事发生在服务器的一面，也许显示了警告有一个通用的消息） - 请阅读评论的
函数getBusinessBill（billReference，billInvoiceDate）{
$。员额（/ AccountStatement / businessBill.htm，{
参考：billReference，
invoiceDate：billInvoiceDate
}，功能（数据）{
/ *您可以实现的数据更多的验证，在我的情况下，我只是使用了这些如果条件句，但可以改变。 * /
如果（数据！= NULL）{//返回'数据'是不是'空'
/ *解析数据为JSON对象
*将有良好的CONSOLE.LOG（数据），一起来看看。 * /
变种物镜= $ .parseJSON（数据）;
如果（OBJ！= {}）{//检查数据是不是一次变换一个空的JSON对象
//在对话框中设置数据
$（'＃DLG-帐户号）文本（obj.accountNumber）;
$（'＃DLG-账单日期）文本（obj.billDate）;
/ *开模态对话框，你可以模拟这种方式（这种情况下）
*但正确的方法是使用'的jQuery用户界面对话框或任何插件，你preFER。
*在这一点上，你会看到一个可见的方式隐藏的'分区'你的数据。
* /
$（'＃BusinessBill）淡入（）;
} 其他 {
//显示通用消息
警报（没有找到结果。'）;
}
} 其他 {
//显示通用消息
警报（发生错误，请重试。'）;
}
}）;
}
最后，如果一切正常，你将在同一页面上看到（ Table.jsp ）的模式与你的数据对话框，所有提出的 AJAX 呼吁避免像（表重定向页面的.jsp 来=> Dialog.jsp ）。
I am new to Spring and web technology.
I have an table which contains a column with hyperlink. When I click on the hyperlink of a row, I need to display that rows data along with other details in a dialog. My controller method returns a ModelAndView which contains the data I need to show and the display page.
Problems:
How to show the dialog? and
How to pass the data to the dialog?
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>
Mapping
@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;
}
Your code is wrong, you are messing things, if you want to use jQuery and ajax calls then don't use ModelAndView in your Spring controller. Instead of that, use the following and return your bean or dto as a json using Jackson library from Java:
Include this jar in your lib project folder:
http://www.java2s.com/Code/JarDownload/jackson/jackson-all-1.9.9.jar.zip
Java code:
@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;
}
Then, in Table.jsp put the div used in Dialog.jsp as hidden, this will be your modal dialog in future (note that there are some changes in the span tags also):
<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>
Now fix your getBusinessBill(..) method like this:
You can also use $.ajax and maybe handle more states like onerror and others but this way is simpler (at least for me, you just need to evaluate if the returned data is null or not and let know the user - if null - that something happened at server side, maybe showing an alert with a generic message) - please read comments.
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.');
}
});
}
Finally, if everything is correct, you will see at the same page (Table.jsp) the modal dialog with your data, all made by an ajax call to avoid redirection pages like (Table.jsp to => Dialog.jsp).
这篇关于Spring MVC的：在对话框中显示的数据做一个AJAX调用后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
