Java SpringMVC：在进行AJAX调用后在对话框中显示数据

我不熟悉Spring和web技术

我有一个表，其中包含一个带有超链接的列。当我单击行的超链接时，我需要在对话框中显示该行的数据以及其他详细信息。我的控制器方法返回一个

ModelAndView

，其中包含我需要显示的数据和显示页面

问题：

@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

<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>

---

你的代码是错误的，你在搞乱事情，如果你想使用

jQuery

和

ajax

调用，那么不要在

Spring

控制器中使用

ModelAndView

。使用

Java

中的

Jackson

库，将以下内容和

return

您的

bean

或

dto

用作

json

：

将此

jar

包含在

lib

项目文件夹中：

@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;
}

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

作为

hidden

，这将是您未来的

模式

对话框（请注意，

span

标记中也有一些更改）：

---

最后，如果一切都正确，您将在同一页面（

Table.jsp

）看到带有

数据的
modal
对话框，所有这些都是通过
ajax
调用生成的，以避免像（
Table.jsp
to=>
dialog.jsp
）这样的页面重定向。这是什么类型的对话框，您使用的是某种modal对话框吗？因为它看起来像一个
html
页面，如果您需要使用
ajax
，那么最好使用模式对话框而不是页面。好的，让我试试使用模型对话框。@OscarJara我已经更新了代码。请告诉我如何将数据传递到对话框，并在从控制器返回后显示对话框。它不像你做的那么简单，请检查我的答案。+1。你能告诉我函数（data）{}中的“data”是什么吗。因为没有什么比数据定义更好的了。抱歉，我不熟悉这些技术。@Che
data
只是用于表示
Spring
控制器的
回调中包含的内容的参数。不需要
声明它
，它起作用了。我还有一个问题。那么我应该在什么时候使用
model和view
。在这种情况下，我不需要重定向，因为我不需要重定向。当我们需要动态重定向到不同的页面时，是否使用了
ModelAndView
？如果不使用
jQuery
（例如，从一页到另一页传递参数，或者从
控制器获取数据导航到特定页面的用户），请使用
ModelAndView
。但是，如果您想要一些动态的东西，或者只是将一些
数据带到客户端，请按照我在这里公开的方式操作。
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.');
        }
    });

}