jQuery实现嵌套页面传参

builder2991

已于 2023-06-26 16:54:34 修改

阅读量1.2k

点赞数

分类专栏： jquery 文章标签： jquery 嵌套页面页面传值

于 2020-05-07 11:55:45 首次发布

本文链接：https://blog.csdn.net/low666/article/details/105969175

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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" style="width:350px;height:250px;"></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

{
	"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 style="color:red">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(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>