html/css+jsp+ajax实现简易版购物车

最新推荐文章于 2024-07-28 18:45:43 发布

monkeydie

最新推荐文章于 2024-07-28 18:45:43 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签： ajax jsp javascript

本文链接：https://blog.youkuaiyun.com/monkeydie/article/details/78336321

这篇博客展示了如何结合HTML、CSS、JSP和AJAX技术来实现一个简单的购物车应用。功能包括从MySQL数据库获取书籍列表、分页展示、动态加载、将书籍添加到购物车并计算总价。博客强调了前端和后端分离的重要性，同时也提供了一个实用的学习实践项目，尽管功能有限，但适合作为前后端技术综合练习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现的功能:

连接mysql数据库获得书目清单；

图书分页显示；并可以实现跳转，动态获取单页书目而不是直接取回所有

可以往购买池里添加书目并显示及计算总价；

在添加完成后可以点击购买跳转页面

在工作当中前端和后端自然是分开的，但是在学习的时候还是都懂一点比较好，这个只是一个小小的几何，很多功能还没实现，只是一个很简单的，但是花点时间去完善的话还是不错的；主要是用来做前端+后台的综合小练习，不然真正要完善那花的时间太长，影响后续学习。

前端页面部分：

bookview.html；前端部分最重要的页面，用于获取书目列表和添加书目到购物车里

这里不把js文件分开了，因为这个文件主要就是js为主，实现了动态添加节点，避免造成某一页书目太少留有一大片空白的尴尬

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书在线浏览</title>
<style type="text/css">
	#book_view{
		margin: 20px auto;
		width: 800px;
		/*height: 400px;*/
		border: 2px solid red;
	}
	.childDiv{
		text-align: center;
		border: 1px solid green;
	}
	.table{	
		width: 800px;	
	}
	.tr{
		width:inherit;
		text-decoration: underline;
		font-size: 20px;
		text-align: center;
	}
	.td1{
		width: 50%;
	}
	.td2{
		width: 20%;
	}
	.td3{
		width: 30%;
	}	
	#bottom table{
		width: 800px;
		text-align: center;
		text-decoration: underline;
	}
	#bottom td:HOVER {
	cursor: pointer;
	color: blue;
}
	#shoppingCar{
		width: 800px;
		border: 1px solid green;
		margin: 20px auto;
		font-size: 18px;
		text-decoration: underline;
	}
	#check{
		margin: 0 auto;
	}
</style>
</head>
<body>
<h1 align="center">在线图书购物商城</h1>
<div id="book_view" align="center">
	
</div>
<div id="bottom" align="center">
	<table>
		<tr style="width:inherit;">
			<td >总共  <span id="countsPage"></span>  页</td>
			<td >当前第  <span id="pageNum">1</span>  页</td>
			<td id="first" onclick="pageClick(event)">首页</td>
			<td id="last1" onclick="pageClick(event)">上一页</td>
			<td id="next" onclick="pageClick(event)">下一页</td>
			<td id="last" onclick="pageClick(event)">尾页</td>
		</tr>
	</table>
</div>
<div id="shoppingCar" align="center" style="text-align: left;">
	<P id="carP"></P>
</div>
<div id="check" align="center">
	<span>总价:</span>    
	<span id="price">0元</span>    
	<input type="button" id="buy" value="结账购买" onclick="checkOut()">
</div>
<script type="text/javascript">
if(window.XMLHttpRequest){
	request=new XMLHttpRequest();
}else{
	request=new ActiveObject("Microsoft.XMLHTTP");
}
deleteNode=false;
function pageClick(e) {
	var target=e.target;
	alert("click");
	var strpageNum=document.getElementById("pageNum").innerHTML;
	var pageNum=parseInt(strpageNum);
	request.open("POST","bookview.jsp",true);
	request.setRequestHeader("Content-Type"  
			        , "application/x-www-form-urlencoded");  
	if(target.id=="first"){
	request.send("pageNum="+1);
	document.getE