jQuery实现嵌套页⾯传参
jQuery实现嵌套页⾯传参
实现嵌套页⾯的传参，⾸先要考虑的是⽗页⾯如何储存值，然后就是⼦页⾯如何获取值，最后就是如何显⽰在页⾯中。
⽗页⾯存储值：
parent.$("body").data("aintt_val", str);
⼦页⾯获取值：
var str = parent.$("body").data("aintt_val");
页⾯显⽰内容：
$("#bdiv").html(str);
⽗页⾯实现代码：
在页⾯设置⼀个button按钮提交input内输⼊的值，存储⽗页⾯输⼊的值，获取json数据，并将json数据进⾏存储。再把要嵌套的页⾯载⼊。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现嵌套页⾯传参</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div>
<div>
<input id="aintt" type="text"/>
<input id="abtn" type="button" value="传值"/>
</div>
<div>
<iframe id="iframe" ></iframe>
</div>
</div>
</body>
<script>
$(function(){
$("#abtn").on("click",function(){
var str = $("#aintt").val();//直接输⼊值传过去
if(!str){
str="未输⼊内容";
}
parent.$("body").data("aintt_val", str);//存储直接输⼊的值
$.getJSON('data/page.json',function(data){//获取json数据
var obj=data;
parent.$("body").data("jsonForm_val", obj);//存储json数据
});
$("#iframe").attr("src","./children.html");//嵌套页⾯
});
});
</script>
</html>
json数据：page.json
iframe嵌套页面加载慢{
"patient":"builder",
"sex":"2",
"age":"6岁",
"doctor":"⽩⽩",
"time":"2020-05-07 11:46:11",
"number":"123456789"
}
嵌套⼦页⾯实现代码：
嵌套⼦页⾯⾸先是要获取到⽗页⾯传过来的值，并将其显⽰在⼦页⾯上。
将json⾥的数据显⽰在页⾯上，还要对input的type进⾏⼀下判断，如果不是简单的⽂本，是checkbo或者radio等其他样式，要进⾏⼀下约束。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现嵌套页⾯传参</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div>
<div>从index.html传过来的值为：<lable id="bdiv"></label></div>
<h3 >json传值过来：</h3>
<form  id="print-info">
<div >
<label>姓名:</label>
<input type="text" name="patient">
</div>
<div >
<label>门诊号:</label>
<input type="text" name="number">
</div>
<div>
<label>申请医⽣:</label>
<input type="text" name="doctor">
</div>
<div>
<label>申请时间:</label>
<input type="text" name="time">
</div>
<div>
<label>性别:</label>
<input type="checkbox" name="sex" value="1">男
<input type="checkbox" name="sex" value="2">⼥
</div>
</form>
</div>
</body>
<script>
$(function(){
var str = parent.$("body").data("aintt_val");//取出⽗页⾯直接输⼊的值
$("#bdiv").html(str);//直接显⽰⽗页⾯输⼊的值
var obj= parent.$("body").data("jsonForm_val");//取出⽗页⾯传过来的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(String.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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。