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

小编典典

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

jsp

我是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;
    }

阅读 264

2020-06-08

共1个答案

小编典典

您的代码是错误的，您搞砸了，如果您想使用jQuery和ajax调用，则不要ModelAndView在Spring控制器中使用。而是使用以下内容，并将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.jspas作为输入hidden，这将是modal将来的对话框（请注意，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-
如果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.jspto
=> Dialog.jsp）。

2020-06-08