一.分析
父页面: parent.$("body").data("aintt_val", str); // 存储参数
子页面:var str = parent.$("body").data("aintt_val");//取参数
$("#bdiv").html(str); //显示内容
二注意
1.此方法俩个页面必须是嵌套关系(也可以用layer 中iframe层的显示)
2. parent.$("body").data("aintt_val", str); 中的 aintt_val 是可以随意设置 (是数据str 的名称) str是数据
3.子页面是获取数据str的名称,从而得到数据
4.jQuery.data() 参考
三.列子
1.jsonForm.txt
{
"brxm00": "陈步卜",
"brxb00": "男",
"age": "25岁",
"sqysxm":"吴聊聊",
"sqrqsj": "2018-01-17 10:36:17",
"txm000": "2018011711",
"zyhghh": "0987654321",
"cjrxm0":"莫年华",
"pyrq00": "2018-01-18",
"pysj00": "15:36:18",
"ch0000": "34556",
"sqksmc": "急诊科",
"shrq00": "2018-01-16",
"shsj00": "15:36:00",
"bblxmc":"血清",
"dyrq00":"2018-01-18",
"dysj00":"13:54:10",
"pyr000":"吴晓峰",
"shr000":"沈天明"
}
2.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="jQuery-2.1.4.min.js"></script>
</head>
<body>
<div>
<div>
<input id="aintt" type="text" />
<input id="abtn" type="button" value="测试"/>
</div>
<div>
<iframe id="iframe" style="width:400px;height:300px;"></iframe>
</div>
</div>
</body>
<script>
$(function(){
$("#abtn").on("click",function(){
var str = $("#aintt").val();//1.直接输入值传过去
if(!str){
str="未输入,默认为空。";
}
parent.$("body").data("aintt_val", str);//1.1存储直接输入的值
$.getJSON('jsonForm.txt',function(data){ //2.获取json数据
var obj=data;
parent.$("body").data("jsonForm_val", obj);//2.2 存储json数据
});
$("#iframe").attr("src","./child1.html?22");//嵌套页面
});
});
</script>
</html>
2.child1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="jQuery-2.1.4.min.js"></script>
</head>
<body>
<div>
<div>从index.html传过来的值为:<lable id="bdiv"></label></div>
<h1>json传值过来:</h1>
<form class="print-info clearfix" id="print-info">
<div class="print-info-row">
<label>姓名:</label>
<input type="text" name="brxm00" value="小小高">
</div>
<div class="print-info-row" style="width: 190px;">
<label>门 诊 号:</label>
<input type="text" name="zyhghh" value="12345678" >
</div>
<div class="print-info-row" style="width: 214px;">
<label>申请医生:</label>
<input type="text" name="sqysxm" value="小高高" >
</div>
<div class="print-info-row" style="width: 220px;margin: 0px 0 0px;">
<label>申请时间:</label>
<input type="text" name="sqrqsj" value="2018-01-16 10:36" >
</div>
<div class="print-info-row">
<label>性别:</label>
<input type="text" name="brxb00" value="女">
</div>
</form>
</div>
</body>
<script>
$(function(){
var str = parent.$("body").data("aintt_val");//1.取出父页面直接输入的值
$("#bdiv").html(str);//1.1直接显示 父页面输入的值
var obj= parent.$("body").data("jsonForm_val");//2.取出父页面穿过来的json数据
$("#print-info").setForm(obj); //2.2把json数据现在form中
});
$.fn.setForm = function(jsonValue){
var obj=this;
$.each(jsonValue, function (name, ival) {
var $oinput = obj.find("input[name=" + name + "]");
if ($oinput.attr("type")== "radio" || $oinput.attr("type")== "checkbox"){
$oinput.each(function(){
if(Object.prototype.toString.apply(ival) == '[object Array]'){//是复选框,并且是数组
for(var i=0;i<ival.length;i++){
if($(this).val()==ival[i])
$(this).attr("checked", "checked");
}
}else{
if($(this).val()==ival)
$(this).attr("checked", "checked");
}
});
}else if($oinput.attr("type")== "textarea"){//多行文本框
obj.find("[name="+name+"]").html(ival);
}else{
obj.find("[name="+name+"]").val(ival);
}
});
}
</script>
</html>