⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 sample7_2.jsp

📁 《Ajax开发精要〉〉该书详细的介绍了关于Ajax和java相关的开发知识
💻 JSP
字号:
🔍 
<%@ page contentType="text/html; charset=gb2312" %>
<%@ page import="com.ajaxlab.ajax.*"%>
<%
MP3PlayerService service = new MP3PlayerService();
MP3Player[] playeres = service.getAllMP3Player();
session.setAttribute("","");
%>
<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("您所请求的页面有异常。");
		}
	}
}
/*关闭产品详细参数DIV*/
function closeProductInfo() {
	document.getElementById("productInfo").style.display = "none";
}
/*添加产品到购物车*/
function doAddProduct(productName) {
	var url = "../AjaxCh07/unitData?action=addProduct&productName="+productName;
	send_request("GET",url,null,"XML",populateCar);	
}
/*删除购物车中指定的产品*/
function doDeleteProduct(productName) {
	var url = "../AjaxCh07/unitData?action=deleteProduct&productName="+productName;
	send_request("GET",url,null,"XML",populateCar);	
}
/*更改购物车中指定的产品数量*/
function doAdjustProduct(productName,num) {
	var url = "../AjaxCh07/unitData?action=adjustProduct&productName="+
		productName+"&count="+document.getElementById("count"+num).value;
	send_request("GET",url,null,"XML",populateCar);	
}
/*填充购物车数据*/
function populateCar() {
	if (http_request.readyState == 4) { // 判断对象状态
		if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
			//alert(http_request.responseXML);
			var doc = http_request.responseXML;
			var orders = doc.getElementsByTagName("order");
			var productList = document.getElementById("productList");
			if(productList.childNodes[1]) productList.removeChild(productList.childNodes[1]);
			productList.appendChild(document.createElement("tbody"));
			document.getElementById("shoppingcar").style.display="";
			if(orders) {
				for(var i=0;i<orders.length;i++) {
					var tr = document.createElement("tr");
					var td1 = document.createElement("td");
					td1.setAttribute("width","200");
					td1.innerHTML = orders[i].childNodes[0].firstChild.data;
					var td2 = document.createElement("td");
					td2.setAttribute("width","50");
					td2.innerHTML = 
						"<input type=\"text\" id=\"count"+i+"\" name=\"num"+orders[i].childNodes[0].firstChild.data+"\" value=\""+orders[i].childNodes[1].firstChild.data+"\" size=\"2\">";
					var td3 = document.createElement("td");
					td3.setAttribute("width","50");
					td3.innerHTML = orders[i].childNodes[2].firstChild.data;
					var td4 = document.createElement("td");
					td4.setAttribute("width","50");
					td4.innerHTML += 
						"<a href=\"javascript:void(0)\" onClick=\"doAdjustProduct('"+orders[i].childNodes[0].firstChild.data+"','"+i+"')\"><img src=\"../images/edit.gif\" align=\"absmiddle\" alt=\"修改\"></a>";
					td4.innerHTML += 
						"<a href=\"javascript:void(0)\" onClick=\"doDeleteProduct('"+orders[i].childNodes[0].firstChild.data+"')\"><img src=\"../images/delete.gif\" align=\"absmiddle\" alt=\"删除\"></a>";
					tr.appendChild(td1);
					tr.appendChild(td2);
					tr.appendChild(td3);
					tr.appendChild(td4);
					productList.childNodes[1].appendChild(tr);
				}
			}
			var totalPrice = doc.getElementsByTagName("totalPrice");
			if(totalPrice[0]) {
				document.getElementById("totalPrice").innerHTML = totalPrice[0].firstChild.data;
			}
		} else { //页面不正常
			alert("您所请求的页面有异常。");
		}
	}
}
/*查看购物车*/
function doViewShoppingCar() {
	var url = "../AjaxCh07/unitData?action=viewShoppingCar";
	send_request("GET",url,null,"XML",populateCar);
}
/*关闭购物车*/
function closeShoppingCar() {
	document.getElementById("shoppingcar").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=\"doAddProduct('"+playeres[i].getProductName()+"')\">[添加到购物车]</a><a href=\"javascript:void(0)\" onClick=\"showProductInfo('"+playeres[i].getProductName()+"')\">[查看产品参数]</a>&nbsp;</td></tr>");
		out.println("</table>");
		out.println("</td>");
		out.println("</tr>");
	}
	out.println("</table>");
}
%>
<table width="350" border="0">
  <tr>
    <td align="center"><input type="button" name="MoveLeft" id="MoveLeft" value="查看购物车" class="button" onClick="doViewShoppingCar()"></td>
  </tr>
</table>
<div id="productInfo" style="z-index:101;left:365px;top:18px;width:410px;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>
<div id="shoppingcar" style="overflow:visible;z-index:101;left:365px;top:351px;width:360px;height:122px; position:absolute; display:'none';background:#F7F7F7; background-color: #F7F7F7; border: 1px solid #000000;">
<form name="carForm" action="" method="post">
<table width="350" border="0" cellpadding="4" cellspacing="0">
	<caption><B>购物车</B></caption>
  <tr>
    <td width="350" align="center">[ 去收银台 ]&nbsp;&nbsp;<a href="javascript:void(0)" onClick="closeShoppingCar()">[ 关闭 ]</a></td>
  </tr>
</table>
<table width="350" border="0" cellpadding="4" cellspacing="0" id="productList">
	<thead>
  <tr>
    <th width="200">产品名称</td>
    <th width="50">数量</td>
    <th width="50">单价</td>
		<th width="50"></th>
  </tr>
	</thead>
</table>
<table width="350" border="0" cellpadding="4" cellspacing="0">
  <tr>
		<td width="290" align="right"><B>总价</B></td>
    <td width="60" align="right" id="totalPrice"></td>
  </tr>
</table>
</form>
</div>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -