📄 sample7_1.jsp
字号:
<%@ page contentType="text/html; charset=gb2312" %>
<%@ page import="com.ajaxlab.ajax.*"%>
<%
MP3PlayerService service = new MP3PlayerService();
MP3Player[] playeres = service.getAllMP3Player();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch07--案例：获取元对象数据</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="../AjaxCh05/ajax_func.js"></script>
<script language="javascript">
function showProductInfo(productName) {
send_request("GET","../AjaxCh07/unitData?action=showProduct&productName="+productName,null,"XML",populateProductInfo);
}
function populateProductInfo() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
//alert(http_request.responseXML);
var doc = http_request.responseXML;
var mp3Player = doc.getElementsByTagName("mp3Player")[0];
if(mp3Player!=null) {
document.getElementById("productInfo").style.display = "";
document.getElementById("imagePath").innerHTML =
"<img src='"+mp3Player.getElementsByTagName("imagePath")[0].firstChild.data+"'>";
document.getElementById("productName").innerHTML =
"产品型号：" + mp3Player.getElementsByTagName("productName")[0].firstChild.data;
document.getElementById("productColor").innerHTML =
"产品颜色：" + mp3Player.getElementsByTagName("productColor")[0].firstChild.data;
document.getElementById("capability").innerHTML =
"存储容量：" + mp3Player.getElementsByTagName("capability")[0].firstChild.data;
document.getElementById("interfaceType").innerHTML =
"接口类型：" + mp3Player.getElementsByTagName("interfaceType")[0].firstChild.data;
document.getElementById("screenType").innerHTML =
"屏幕类型：" + mp3Player.getElementsByTagName("screenType")[0].firstChild.data;
document.getElementById("record").innerHTML =
"录音功能：" + mp3Player.getElementsByTagName("record")[0].firstChild.data;
document.getElementById("straightRecord").innerHTML =
"直录功能：" + mp3Player.getElementsByTagName("straightRecord")[0].firstChild.data;
document.getElementById("fm").innerHTML =
"FM功能：" + mp3Player.getElementsByTagName("fm")[0].firstChild.data;
document.getElementById("battery").innerHTML =
"电池：" + mp3Player.getElementsByTagName("battery")[0].firstChild.data;
document.getElementById("ebookFunc").innerHTML =
"电子书阅读：" + mp3Player.getElementsByTagName("ebookFunc")[0].firstChild.data;
document.getElementById("gameFunc").innerHTML =
"游戏功能：" + mp3Player.getElementsByTagName("gameFunc")[0].firstChild.data;
document.getElementById("playAvailable").innerHTML =
"播放时间：" + mp3Player.getElementsByTagName("playAvailable")[0].firstChild.data;
document.getElementById("weight").innerHTML =
"重量：" + mp3Player.getElementsByTagName("weight")[0].firstChild.data;
document.getElementById("fileSupported").innerHTML =
"支持文件格式：" + mp3Player.getElementsByTagName("fileSupported")[0].firstChild.data;
document.getElementById("voiceEffect").innerHTML =
"数字音效：" + mp3Player.getElementsByTagName("voiceEffect")[0].firstChild.data;
document.getElementById("outputPower").innerHTML =
"输出功率：" + mp3Player.getElementsByTagName("outputPower")[0].firstChild.data;
document.getElementById("frequencyScope").innerHTML =
"频率范围：" + mp3Player.getElementsByTagName("frequencyScope")[0].firstChild.data;
document.getElementById("price").innerHTML =
"产品价格：" + mp3Player.getElementsByTagName("price")[0].firstChild.data;
}
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function closeProductInfo() {
document.getElementById("productInfo").style.display = "none";
}
</script>
</head>
<body>
<%
if(playeres!=null) {
out.println("<table width=\"350\" border=\"0\" cellspacing=\"2\" cellpadding=\"0\">");
for(int i=0;i<playeres.length;i++) {
out.println("<tr valign=\"top\">");
out.println("<td width=\"150\" height=\"150\"><img height=\"150\" src=\""+playeres[i].getImagePath()+
"\" width=\"150\" onMouseOver=\"showProductInfo('"+playeres[i].getProductName()+"')\" onMouseOut=\"closeProductInfo()\"></td>");
out.println("<td width=\"200\" height=\"150\">");
out.println("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"4\">");
out.println("<tr><td>产品型号："+playeres[i].getProductName()+"</td></tr>");
out.println("<tr><td>存储容量："+playeres[i].getCapability()+"</td></tr>");
out.println("<tr><td>产品颜色："+playeres[i].getProductColor()+"</td></tr>");
out.println("<tr><td>接口类型："+playeres[i].getInterfaceType()+"</td></tr>");
out.println("<tr><td>录音功能："+playeres[i].getRecord()+"</td></tr>");
out.println("<tr><td></td></tr>");
out.println("<tr><td align=\"right\"><a href=\"javascript:void(0)\" onClick=\"showProductInfo('"+playeres[i].getProductName()+"')\">查看产品参数</a> </td></tr>");
out.println("</table>");
out.println("</td>");
out.println("</tr>");
}
out.println("</table>");
}
%>
<div id="productInfo" style="z-index:101;left:365px;top:18px;width:408px;height:307px; position:absolute; display:'none';background:#F7F7F7; background-color: #F7F7F7; border: 1px solid #000000;">
<table width="400" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="200" rowspan="8" align="center" id="imagePath"></td>
<td width="200" id="productName">产品型号：</td>
</tr>
<tr>
<td id="productColor">产品颜色：</td>
</tr>
<tr>
<td id="capability">存储容量：</td>
</tr>
<tr>
<td id="interfaceType">接口类型：</td>
</tr>
<tr>
<td id="screenType">屏幕类型：</td>
</tr>
<tr>
<td id="record">录音功能：</td>
</tr>
<tr>
<td id="straightRecord">直录功能：</td>
</tr>
<tr>
<td id="fm">FM功能：</td>
</tr>
<tr>
<td id="battery">电池：</td>
<td id="ebookFunc">电子书阅读：</td>
</tr>
<tr>
<td id="gameFunc">游戏功能：</td>
<td id="playAvailable">播放时间：</td>
</tr>
<tr>
<td id="weight">重量：</td>
<td id="fileSupported">支持文件格式：</td>
</tr>
<tr>
<td id="voiceEffect">数字音效：</td>
<td id="outputPower">输出功率：</td>
</tr>
<tr>
<td id="frequencyScope">频率范围：</td>
<td id="price">产品价格：</td>
</tr>
<tr align="center">
<td height="30" colspan="2"><a href="javascript:void(0)" onClick="closeProductInfo()">[ 关闭 ]</a></td>
</tr>
</table>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -