关于document.Form.target在父窗口中显示子窗口的问题-CSDN博客

本文链接：https://blog.csdn.net/qq_34357018/article/details/107811774

流程：

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

如对你有帮助的话，请给个赞或评论一下，谢谢