流程:
在parent.html画面中点击“查询”按钮
-->跳转到ParentController.java中的searchCount()方法,返回查询结果
-->(满足条件时)根据
document.parentForm.action = contextPath + "/search";
document.parentForm.target = "childFrame";
document.parentForm.submit();
跳转到ParentController.java中的search()方法
-->将child.html的内容显示到parent.html的<iframe>中
简化代码:
parent.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body>
<form name="parentForm" id="parentForm" style="margin:0;" method="post">
.......
<input type="button" id="btnSearch" value="查询" style="width:100px;height:35px;">
</form>
<br>
<iframe src="" id="childFrame" name="childFrame" tabindex=-1
style="width:100%;height:430px;border:0px;overflow: hidden;">
</iframe>
</body>
</html>
child.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body>
<table id="tables">
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
</body>
</html>
parent.js
var pathArray = location.pathname.split('/');
var contextPath= "/" + pathArray[1];
$("#btnSearch").on("click", function(){
var data = $("#parentForm").serializeArray();
data = parseJson(data);
$.ajax({
type: "post",
url: contextPath + "/searchCnt",
dataType: "json",
contentType: "application/json",
scriptCharset: "utf-8",
async: false,
data: JSON.stringify(data)
}).done(function(data){
//成功
if (data.returnCode == "0") {
document.parentForm.action = contextPath + "/search";
document.parentForm.target = "childFrame";//会在parent.html中找存不存在iframe的id为“childFrame”的标签
document.parentForm.submit();
} else{
alert(data.message);
}
}).fail(function(jqXHR, textStatus, errorThrown){
//失败
alert(jqXHR.responseJSON.message);
}).always(function( jqXHR, textStatus ){
});
});
ParentController.java
@Controller
@Scope("request")
public class ParentController{
/**
* 查询件数
*/
@RequestMapping(value = "/searchCnt", method = RequestMethod.POST)
@ResponseBody
public ResponseEntity<ResponseMsg> searchCount(@RequestBody @Validated SearchObject paramsObject) throws Exception {
try {
...
//件数取得
Map<String, Integer> resultMap = searchService.searchCount(paramsObject);
//件数check
ResponseMsg cr = CheckUtil.checkCount(resultMap);
return ResponseEntity.ok(cr);
} catch (Exception e) {
throw new AjaxException(e.getMessage(), null, null);
}
}
/**
* 查询处理
*/
@ResponseBody
@RequestMapping(value = "/search", method = { RequestMethod.POST })
public ModelAndView search(ModelAndView mv, @Validated SearchObject paramsObject) throws Exception {
...
//查询内容
List<ResultObject> resultObjectList = parentService.search(paramsObject);
//这里写的是子画面的名称
mv.setViewName("child");
if (resultObjectList != null && resultObjectList.size() > 0) {
mv.addObject("jsonData", JSONArray.fromObject(resultObjectList));
} else {
mv.addObject("jsonData", "");
}
return mv;
}
}
如对你有帮助的话,请给个赞或评论一下,谢谢