在java开发过程中,父页面中再出现子页面的情况有很多种,也很常见,但两个页面之间实现传值的方式却不尽相同,今天在开发过程中,我无意见发现自己无法将子页面的值传递给父页面,经过一整天的研究,终于找到了解决办法,写此文章防止自己忘记,也与大佬们交流学习,写的不好,还请见谅。
子页面到父页面的传值方式有很多,比如子页面通过form表单处理完数据后关闭子页面,父页面通过刷新或者后台二次跳转,可以实现两个数据的传输。或者直接将子页面做成隐藏的div,js可操作两个div,这样父子页面的数据便达成了互通。这也是现在大多数网页使用的方法,但今天我做的这个系统,没有使用这样的方式,而是单纯的两个页面,通过点击父页面的按钮,跳转到子页面,子页面获取生成的编码后再将数据返还给父页面,如图:
这个是父页面
这个是子页面
研究过很多种方法,最后还是做了一点点改变,将提交按钮修改成了button,然后在方法中使用callback回调函数,代码如下:
父页面:
$(this).attr("data-modal-size", "modal-full").popupDialog({
title: "自助取号",
url: url,
callback: function () {
backDate();
}
})
子页面:
$("#purchaseDemandAdd4").on("click", function () {
var _this=$(this);
var year = $("#year").val();
var purchaseType = $("#purchaseType").val();
var serialNumber = $("#serialNumber").val();
var projectCode = $("#projectCode").val();
var poId = $("#poId").val();
$.ajax({
type: 'POST',
url: WEB_ROOT + '/admin/purchase/purchase-contract/saveNumber',
async:false,
data: {
year: year,
purchaseType:purchaseType,
serialNumber:serialNumber,
projectCode:projectCode,
poId:poId
},
dataType: "json",
success: function(data) {
var $dialog = _this.closest(".modal");
var callback = $dialog.data("callback");
if (callback) {
callback.call(_this);
}
Global.notify("success", "数据保存成功!");
},
error : function(){
Global.notify("error", "数据加载处理失败,请尝试刷新或联系管理员!");
}
});
其中success下的代码为关键代码。