异步加载子页面

今天在编写运营后台的时候，遇到一个需要在同一页面中根据当前某条数据的Id，将关联的子表数据加载到同一页面中，想到的实现方式有两种，最终选择的是第二种方式，在此仅作记录

实现方式：

（1）使用iframe实现

主数据列表中通过插入一个iframe元素，默认加载标示为0，在用户点击某一字段时，触发加载，一次加载后，改写加载标示为1，之后仅作显示即可。

主要代码：

HTML部分

<tr id="mainData<s:property value="id" />" isShow="0" loadpage="0" style="display:none">
   <td colspan=17>
	<iframe id="mainDataFreame<s:property value="id" />" >
	</iframe>
   <td>
</tr>

 javaScript部分：

function showDataById(id)
{
	if($("#mainData"+id).attr("loadpage")=="0")
	{
		
		var url="dataAction!list?mainDataId="+id;
		var mainIframe = window.frames["mainIframe"+id];
		mainIframe.src=url;
		$("#mainData"+id).attr("loadpage","1");
	}
	if($("#mainData"+id).prop("isShow")=="1")
	{
		$("#mainData"+id).prop("isShow","0");
		$("#mainData"+id).hide();
	}
	else
	{
		$("#mainData"+id).prop("isShow","1");
		$("#mainData"+id).show();
	}
}

 （2）使用JQuery load方法加载html到div中

HTML代码部分：

<tr id="mainData<s:property value="id" />" tropen="0" loadpage="0" style="display:none">
    <td colspan=17>
	<div id="#mainDataDiv<s:property value="id" />" width="100%" height="500px">
    </div>
    <td>
</tr>

 Javascript部分：

function showDataById(id)
{
	if($("#mainData"+id).attr("loadpage")=="0")
	{
		
		var url="dataAction!list?mainDataId="+id;
		$("#mainDataDiv"+id).load(url);
		$("#mainData"+id).attr("loadpage","1");
	}
	if($("#mainData"+id).prop("isShow")=="1")
	{
		$("#mainData"+id).prop("isShow","0");
		$("#mainData"+id).hide();
	}
	else
	{
		$("#mainData"+id).prop("isShow","1");
		$("#mainData"+id).show();
	}
}