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

小编典典

您的代码是错误的，您搞砸了，如果您想使用jQuery和ajax调用，则不要ModelAndView在Spring控制器中使用。而是使用以下内容，并将return您的bean或dto作为json使用Jackson库从中使用Java：

包括jar在您的lib项目文件夹中：

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标记中也有一些更改)：

Bill Details

Business Ltd

Account number

Bill date

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