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

来源：互联网发布：装修设计的软件编辑：程序博客网时间：2024/05/22 06:23

实现的功能:

连接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.getElementById("pageNum").innerHTML="1";}else if(target.id=="last1"&&pageNum>1){request.send("pageNum="+(pageNum-1));document.getElementById("pageNum").innerHTML=""+(pageNum-1);}else if (target.id=="next"&&pageNum<pageCounts) {request.send("pageNum="+(pageNum+1));document.getElementById("pageNum").innerHTML=""+(pageNum+1);}else if (target.id=="last") {request.send("pageNum="+pageCounts);document.getElementById("pageNum").innerHTML=""+pageCounts;}deleteNode=true;request.onreadystatechange=dealPage;}window.onload=function(){//定义一个全局变量  书籍总价sumPricesumPrice=0;if(window.XMLHttpRequest){var frequest=new XMLHttpRequest();}else{var frequest=new ActiveObject("Microsoft.XMLHTTP");}frequest.open("POST","bookview.jsp",true);frequest.setRequestHeader("Content-Type"          , "application/x-www-form-urlencoded");  frequest.send("getPage=-1");frequest.onreadystatechange=function(){if(frequest.readyState==4&&frequest.status==200){var strPageCount=frequest.responseText;//pageCounts指的是总共的页数  因为后续要请求的是json数据，为避免麻烦，直接把页数请求放在第一个ajax请求里pageCounts=parseInt(strPageCount);pageCounts_target=document.getElementById("countsPage");pageCounts_target.innerHTML=""+pageCounts;}}var pageNum=document.getElementById("pageNum").innerHTML;request.open("POST","bookview.jsp",true);request.setRequestHeader("Content-Type"          , "application/x-www-form-urlencoded");  request.send("pageNum="+pageNum);request.onreadystatechange=dealPage;}function dealPage() {if(request.readyState==4&&request.status==200){var bookJson=request.responseText;json=JSON.parse(bookJson);var book_view=document.getElementById("book_view");//起到翻折刷新的作用if(deleteNode==true){book_view.innerHTML="";}deleteNode=false;for(var i=0;i<json.length;i++){var childDiv=document.createElement("div");childDiv.className="childDiv";book_view.appendChild(childDiv);//创建表节点 默认是一张表为一行var table=document.createElement("table");table.className="table";table.align="center";var tr=document.createElement("tr");tr.className="tr";for(var j=0;j<3;j++){var td=document.createElement("td");td.className="td";switch (j) {case 0:td.innerHTML=json[i].name;td.className="td1";break;case 1:td.innerHTML=json[i].price;td.className="td2";break;case 2:td.innerHTML="在线购买";td.onclick=handleAdd;break;default:break;}tr.appendChild(td);}table.appendChild(tr);childDiv.appendChild(table);}}}function handleAdd(e) {//分别，获取所点击的那一行的书名和价格var childNodes=e.target.parentNode.children;var bookName=childNodes[0].innerHTMLvar bookPrice=parseFloat(childNodes[1].innerHTML);carP=document.getElementById("carP").innerHTML;carP=carP+"<br>"+bookName;sumPrice+=bookPrice;document.getElementById("price").innerHTML=sumPrice+"元";document.getElementById("carP").innerHTML=carP;}function checkOut() {request.open("POST","bookview.jsp",true);request.setRequestHeader("Content-Type"          , "application/x-www-form-urlencoded");  request.send("price="+sumPrice);request.onreadystatechange=function(){if(request.readyState==4&&request.status==200){window.sessionStorage.setItem("price",sumPrice);window.sessionStorage.setItem("carP",carP);window.location.href("checkOut.html");}}}</script></body></html>

2.checkOut.html

简单的显示了书目清单和总价，询问用户是否确认购买

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 align="center">书目清单</h1>
<div id="mydiv" align="center" style="text-decoration: underline;"></div>
<div id="buy" align="center">
<span id="price"></span>    
<input type="button" value="确定购买" onclick="buy()">
</div>
<script type="text/javascript">
var price=window.sessionStorage.getItem("price");
var carP=window.sessionStorage.getItem("carP");
document.getElementById("mydiv").innerHTML=carP;
document.getElementById("price").innerHTML="总价:"+price;
function buy() {
window.location.href("buy.html");
}
</script>
</body>
</html>

3.buy.html

更加简单的页面，实际应用跳转到支付平台网站

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 align="center">
付款完成，购买成功!
</h1>
</body>
</html>

服务端部分：

1.首先是封装了数据库连接的类：可以提供数据库连接

package bookstore;

import java.sql.Connection;
import java.sql.DriverManager;

public class ConnectMysql {
private static Connection con;
public static Connection getConnection(){
  try {
   Class.forName("com.mysql.jdbc.Driver");
   String url="jdbc:mysql://localhost/student";
   String user="root";
   String password="forever19961010";
   con=DriverManager.getConnection(url, user, password);
   return con;
  } catch (Exception e) {
   // TODO: handle exception
   return con;
  }

}
}

2.javabean:一系列set,get方法，但是实际用到的只有两个；因为只有两列而且在这个练习里没有插入功能

package bookstore;

public class BookBean {
private String book_id;
private String book_name;
private String book_author;
private float book_price;
public void setId(String id){
  this.book_id=id;
}
public void setName(String name){
  this.book_name=name;
}
public void setAuthor(String author){
  this.book_author=author;
}
public void setPrice(float price){
  this.book_price=price;
}
public String getId(){
  return book_id;
}
public String getName(){
  return book_name;
}
public String getAuthor(){
  return book_author;
}
public float getPrice(){
  return book_price;
}
}

3.用于获取页面总数以及实现分页从数据库取回；否则对于大数据库用一次性取回方式会被用户杀了祭天的

package bookstore;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Collection;

public class BookList {
private Collection list;
private Connection con;
private ConnectMysql connection;
public static int rowsPerPage=6;
private int pageCounts;
private int rowsCounts;
public Collection getPage(int pageNum) throws SQLException{
  list=new ArrayList();
  con=connection.getConnection();
  String sql="select * from booklist limit "+(pageNum-1)*rowsPerPage+" , "+rowsPerPage;
  Statement st=con.createStatement();
  ResultSet rs=st.executeQuery(sql);
  while(rs.next()){
   BookBean book=new BookBean();
   //book.setId(rs.getString("book_id"));
   book.setName(rs.getString("book_name"));
   //book.setAuthor(rs.getString("book_author"));
   book.setPrice(rs.getFloat("book_price"));
   list.add(book);
  }
  st.close();
  con.close();
  rs.close();
  return list;
}
public int getRowsCount() throws SQLException{
  con=connection.getConnection();
  String sql="select count(*) from booklist";
  Statement st=con.createStatement();
  ResultSet rs=st.executeQuery(sql);
  rs.first();
  rowsCounts=rs.getInt(1);

  st.close();
  rs.close();
  con.close();
  return rowsCounts;
}
public int getPageCounts()throws SQLException{
  int rows=getRowsCount();
  if(rows%rowsPerPage==0){
   pageCounts=rows/rowsPerPage;
  }else {
   pageCounts=rows/rowsPerPage+1;
  }
  return pageCounts;
}
public int getRowsPerPage(){
  return rowsPerPage;

}
}

4.jsp页面：处理前端请求，主要是封装了一个JSON类返回

<%@page import="net.sf.json.JSONArray"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="java.util.Collection"%>
<%@page import="java.io.PrintWriter"%>
<%@page import="bookstore.BookList"%>
<%@ page language="java" contentType="text/html; charset=gb2312"
    pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Insert title here</title>
</head>
<body>
<%
BookList bookList=new BookList();
String pageCounts=String.valueOf(bookList.getPageCounts());
String pageNum=request.getParameter("pageNum");
String getPage=request.getParameter("getPage");
String price=request.getParameter("price");
if(pageNum!=null){
  PrintWriter writer=response.getWriter();
  Collection collection=bookList.getPage(Integer.valueOf(pageNum));
  JSONObject obj=new JSONObject();
  obj.put("key", collection);
  JSONArray array=obj.getJSONArray("key");
  writer.write(array.toString());
  writer.close();
}else if(getPage!=null){
  PrintWriter writer=response.getWriter();
  writer.write(pageCounts);
  writer.close();
}
if(price!=null){
  System.out.print(price);
}
%>
</body>
</html>

阅读全文

0 0