用jquery实现iframe无刷新显示，问题

weixingwx911 2010-10-25 01:52:28

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

</SCRIPT>
<script type="text/javascript">

$(document).ready(function(){
$("#show1").click(function(){
clearHtml();
getJsonStr("show1Action.action");
});

$("#show2").click(function(){
clearHtml();
getJsonStr("show2Action.action");
});
});

function getJsonStr(url){
$.getJSON(
url
,function call(data){
writeHtml(data);
}
);
}

function writeHtml(data){

var citys = data.list;
var htmlStr = "<html><body><table border=1>";
htmlStr += "<tr>";
htmlStr += "<th>";
htmlStr += "id";
htmlStr += "</th>";
htmlStr += "<th>";
htmlStr += "name";
htmlStr += "</th>";
htmlStr += "<th>";
htmlStr += "provinceId";
htmlStr += "</th>";
htmlStr += "<th>";
htmlStr += "button";
htmlStr += "</th>";
htmlStr += "</tr>";

$.each(citys, function(i, city){
htmlStr += "<tr>";
htmlStr += "<td bgcolor=\"red\">";
htmlStr += city.cityId;
htmlStr += "</td>";
htmlStr += "<td>";
htmlStr += city.cityName;
htmlStr += "</td>";
htmlStr += "<td>";
htmlStr += city.provinceId;
htmlStr += "</td>";
htmlStr += "<td>";
htmlStr += "<button onclick=test()>sssss</button><input type=text><input type=checkbox>";
htmlStr += "</td>"
htmlStr += "</tr>";
});

htmlStr += "</table></body></html>";
alert('///////'+htmlStr);
$("#mainFrame").attr("src",htmlStr);

}

function clearHtml(){
}
</script>
<script type="text/javascript">
function test(){
alert('************');
}

</script>
</head>

<body>
<table border=1>
<tr>
<td>
<input type="button" value="show1" id="show1"><br>
<input type="button" value="show2" id="show2">

</td>

</tr>
</table>
<table>
<tr>
<td>
<iframe name="mainFrame" id="mainFrame"
src="index.jsp" width="900" marginwidth=1
marginheight="0" scrolling="no" border="1" >
</iframe>
</td>
</tr>
</table>
</body>
</html>

说明下我要实现的功能，点击show1按钮的时候调用juqery方法，查询出来的list用json解析为一段htmlStr 。如图