`
YiSingQ
  • 浏览: 88377 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

用Ajax实现分页功能的图书购物车

    博客分类：
  • Web
AjaxXMLServlet出版SQL Server 
阅读更多
    最近在学习Ajax的过程中，做了一个关于图书的购物车示例，图书的信息保存在服务器端的XML文档中，通过Ajax的异步交互获取XML文件内容，然后在客户端解析XML DOM，最后再在客户端用JS实现简单的分页。
    本人觉得JS文件中的分页做得不是很好，请各位能够多多提点意见，大家共同进步。

效果示例图：



---------------------------以下是基本的文件代码-----------------------------
bookList.xml-->存储书本信息 
<?xml version="1.0" encoding="utf-8"?>
<CATALOG>
	<BOOK>
        <Img>001.jpg</Img>
		<BookName>Beginning ASP.NET with C #</BookName>
		<Authors>Hart, Kauffman, Sussman, Ullman</Authors>
		<ISBN>0764588508</ISBN>
		<Price>$39.99</Price>
		<Quantity>50</Quantity>
		<VerYear>1985</VerYear>
	</BOOK>

	<BOOK>
        <Img>002.jpg</Img>
		<BookName>计算机技术集成概论</BookName>
		<Authors>张三牛</Authors>
		<ISBN>0764588509</ISBN>
		<Price>$59.99</Price>
		<Quantity>45</Quantity>
		<VerYear>2001</VerYear>
	</BOOK>

	<BOOK>
        <Img>003.jpg</Img>
		<BookName>操作系统原理</BookName>
		<Authors>李四喜</Authors>
		<ISBN>0764588510</ISBN>
		<Price>$69.99</Price>
		<Quantity>55</Quantity>
		<VerYear>2002</VerYear>
	</BOOK>

	<BOOK>
        <Img>004.jpg</Img>
		<BookName>汇编语言</BookName>
		<Authors>刘也</Authors>
		<ISBN>0764588511</ISBN>
		<Price>$69.99</Price>
		<Quantity>55</Quantity>
		<VerYear>2002</VerYear>
	</BOOK>

	<BOOK>
        <Img>005.jpg</Img>
		<BookName>Oracle 实用开发指南</BookName>
		<Authors>朱五六</Authors>
		<ISBN>0764588513</ISBN>
		<Price>$69.99</Price>
		<Quantity>55</Quantity>
		<VerYear>2002</VerYear>
	</BOOK>

	<BOOK>
        <Img>006.jpg</Img>
		<BookName>Ajax的工作原理</BookName>
		<Authors>李小将</Authors>
		<ISBN>0764588514</ISBN>
		<Price>$69.99</Price>
		<Quantity>55</Quantity>
		<VerYear>2002</VerYear>
	</BOOK>

	<BOOK>
        <Img>007.jpg</Img>
		<BookName>数据结构</BookName>
		<Authors>何伟</Authors>
		<ISBN>0764588515</ISBN>
		<Price>$69.99</Price>
		<Quantity>55</Quantity>
		<VerYear>2002</VerYear>
	</BOOK>

	<BOOK>
        <Img>008.jpg</Img>
		<BookName>SQL Server开发指南</BookName>
		<Authors>耿文化</Authors>
		<ISBN>0764588516</ISBN>
		<Price>$69.99</Price>
		<Quantity>55</Quantity>
		<VerYear>2002</VerYear>
	</BOOK>
</CATALOG>


Cart.js-->异步交互的JS文件 
var xmlHttpRequest;

var currentPage = 0;//记录当前页索引
var everyPageCount = 3;//每页显示的项目数量
var maxPageCount = 0;//记录最大页数
var bookIndex = -1;//当前BOOK元素的索引

var result = null;//服务器返回的XML文档对象
var bookNodes = null;//储存所有BOOK节点对象

//创建一个用来和服务端交互的Ajax核心对象XMLHttpRequest
function createXMLHttpRequest(){
	if(window.XMLHttpRequest){
		xmlHttpRequest = new XMLHttpRequest();
		if(xmlHttpRequest.overrideMimeType){
			xmlHttpRequest.overrideMimeType("text/xml");
		}
	}
	else if(window.ActiveXObject){
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
}

//使用传统的注册事件模型注册按钮
function registerButtonEvent(){
    document.getElementById("previousPage").onclick = sendPreviousPage;
    document.getElementById("nextPage").onclick = sendNextPage;
}

//购物车页面初始化
function sendRequest(){
    registerButtonEvent();//注册页面的按钮事件
    createXMLHttpRequest();//创建XMLHttpRequest对象

    //异步加载XML文档数据
    xmlHttpRequest.open("GET", "bookList.xml?id=" + Number(new Date), true);

    //指定回调函数
    xmlHttpRequest.onreadystatechange = getInitData;

    xmlHttpRequest.send(null);
}

//页面初始化回调函数从服务器端获取XML文档数据并解析
function getInitData(){
	if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        //alert("Server Success!");
        result = xmlHttpRequest.responseXML;
        bookNodes = result.getElementsByTagName('BOOK');
        //alert("bookNodes.length=" + bookNodes.length);
        if(currentPage == 0 && bookNodes.length == 0){
            document.getElementById("info").innerHTML = "很抱歉,未找到相关数据!";
            document.getElementById("maxPageCount").innerHTML = 0;
            document.getElementById("currentPage").innerHTML = 0;
            return;
        }
        else{
            //判断并获取最大页数
            //alert(parseInt(bookNodes.length/everyPageCount));
            maxPageCount = bookNodes.length%everyPageCount==0?parseInt(bookNodes.length/everyPageCount):parseInt(bookNodes.length/everyPageCount+1);
            document.getElementById("maxPageCount").innerHTML = maxPageCount;
            sendNextPage();
        }

    }
}

//前一页按钮
function sendPreviousPage(){
    var pageFirstItem = 0;//记住上一页的第一项的索引
    if(bookIndex%3 == 0){
        pageFirstItem = bookIndex - everyPageCount * 2 + 2;
    }
    else if(bookIndex%3 == 1){
        pageFirstItem = bookIndex - everyPageCount * 2 + 1;
    }
    else if(bookIndex%3 == 2){
        pageFirstItem = bookIndex - everyPageCount * 2;    
    }

    if(currentPage == 0 || currentPage == 1){
        alert("当前页已经是第一页!");
        return;
    }
    
//    if(pageFirstItem < -1){
//        alert("当前页已经是第一页!");
//        return;
//    }

    if(pageFirstItem >= -1){
        bookIndex = pageFirstItem;
        currentPage--;
        document.getElementById("currentPage").innerHTML = currentPage;
        for(var i = 0; i < everyPageCount; i++){
            var imgTag = "img" + (i+1).toString();
            var desTag = "des" + (i+1).toString();
            if(bookIndex < bookNodes.length - 1){
                bookIndex++;
                displayItem(bookIndex,imgTag,desTag,1);
            }
            else{
                displayItem(bookIndex,imgTag,desTag,0);
            }
        }
    }
}

//下一页按钮
function sendNextPage(){
    var pageEndItem = bookIndex + everyPageCount;//下一页面最后一项的索引
    
    if(pageEndItem <= bookNodes.length + 1){
        currentPage++;
        document.getElementById("currentPage").innerHTML = currentPage;
        for(var i = 0; i < everyPageCount; i++){
            var imgTag = "img" + (i+1).toString();
            var desTag = "des" + (i+1).toString();
            if(bookIndex < bookNodes.length - 1){
                bookIndex++;
                displayItem(bookIndex,imgTag,desTag,1);
            }
            else{
                displayItem(bookIndex,imgTag,desTag,0);
            }
        }
    }
//    else if(currentPage + 1 == maxPageCount){
//        alert("当前页是最后一页!");
//        return;
//    }
    else if(pageEndItem > bookNodes.length){
        alert("当前页是最后一页!");
        return;
    }
}

//显示指定索引的BOOK项目到指定的页面位置
function displayItem(bookIndex,imgTag,desTag,flag){
    if(flag == 1){
        var imgString = null;
        var desString = null;
        var bookImg = bookNodes[bookIndex].getElementsByTagName("Img")[0].childNodes[0].nodeValue;
        //alert(bookImg);
        var bookName = " 书名: " + bookNodes[bookIndex].getElementsByTagName("BookName")[0].childNodes[0].nodeValue;
        var authors = " 作者: " + bookNodes[bookIndex].getElementsByTagName("Authors")[0].childNodes[0].nodeValue + "<br/>";
        var isbn = " 出版号: " + bookNodes[bookIndex].getElementsByTagName("ISBN")[0].childNodes[0].nodeValue + "<br/>";
        var price = " 出版年: " + bookNodes[bookIndex].getElementsByTagName("VerYear")[0].childNodes[0].nodeValue + "<br/>";
        var quantity = " 价格: " + bookNodes[bookIndex].getElementsByTagName("Price")[0].childNodes[0].nodeValue + "<br/>";
        var varYear = " 库存数量: " + bookNodes[bookIndex].getElementsByTagName("Quantity")[0].childNodes[0].nodeValue + "<br/>";

        imgString = "<img src=\"" + bookImg + "\"/>";

        desString = bookName + "<br/>";
        desString += authors;
        desString += isbn;
        desString += varYear;
        desString += price;
        desString += quantity;
        
        desString += "<a href=\"#\" onclick=\"addRemoveItem('add','" + bookName + "')\">" + "将这本书加入购物车(购买)</a>";
        //alert("<a href=\"#\" onclick=\"addRemoveItem('add','" + bookName + "')\">" + "将这本书加入购物车(购买)</a>");

        document.getElementById(imgTag).innerHTML = imgString;
        document.getElementById(desTag).innerHTML = desString;
    }
    else{
        document.getElementById(imgTag).innerHTML = "";
        document.getElementById(desTag).innerHTML = "";
    }
}

//利用服务器Session保存购物车内容
function addRemoveItem(action,bookName){
    if(action == 'add'){
        var url = "/ManageCartServlet?action=" + action + "&bookName=" +encodeURIComponent(bookName) + "&value=" + Number(new Date);
        xmlHttpRequest.open("GET", url, true);
        xmlHttpRequest.onreadystatechange = getData;
        xmlHttpRequest.send(null);
    }
    else{
        var url = "/ManageCartServlet?action=" + action + "&bookName=" +encodeURIComponent(bookName) + "&value=" + Number(new Date);
        xmlHttpRequest.open("GET", url, true);
        xmlHttpRequest.onreadystatechange = getData;
        xmlHttpRequest.send(null);
    }
}

//回调函数从服务器端获取结果数据并解析
function getData(){
	if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        //alert("Server Success!");
        var result = xmlHttpRequest.responseXML;
        var bookNodes = result.getElementsByTagName('BOOK');
        var bookNameNodes = result.getElementsByTagName('BookName');
        var quantityNodes = result.getElementsByTagName('Quantity');

        var spantag = document.getElementById('cart');
        spantag.innerHTML = "";

        for(var i = 0; i < bookNodes.length; i++){
            if(window.ActiveXObject){
                spantag.innerHTML += " " + bookNodes[i].firstChild.text;
                spantag.innerHTML += " --> ";
                spantag.innerHTML += " " + bookNodes[i].lastChild.text;
                spantag.innerHTML += "  ";
                spantag.innerHTML += " " + "<a href=\"#\" onclick=\"addRemoveItem('remove','" + bookNodes[i].firstChild.text + "')\">" + "从购物车删除这本书</a>";
                spantag.innerHTML += "<br/>";
            }
            else{
                spantag.innerHTML += " " + bookNameNodes[i].firstChild.nodeValue;
                //spantag.innerHTML += " " + bookNodes[1].firstChild.textContent;
                spantag.innerHTML += " --> ";
                spantag.innerHTML += " " + quantityNodes[i].firstChild.nodeValue;
                //spantag.innerHTML += " " + bookNodes[1].firstChild.textContent;
                spantag.innerHTML += "  ";
                spantag.innerHTML += " " + "<a href=\"#\" onclick=\"addRemoveItem('remove','" + bookNameNodes[i].firstChild.nodeValue + "')\">" + "从购物车删除这本书</a>";
                spantag.innerHTML += "<br/>";
            }
        }
    }
}


Cart.html-->页面显示使用的HTML文件 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>购物车示例</title>
    <script type="text/javascript" src="Cart.js"></script>
</head>
<body onload="sendRequest()">
    总共<span id="maxPageCount"></span>页----当前第<span id="currentPage"></span>页
    <hr size="1"/>
    <div id="info"></div>
    <table>
        <tr>
            <td><div id="img1"></div></td>
            <td><div id="img2"></div></td>
            <td><div id="img3"></div></td>
        </tr>
        <tr>
            <td><div id="des1"></div></td>
            <td><div id="des2"></div></td>
            <td><div id="des3"></div></td>
        </tr>
    </table>
    <br/>
    <input type="button" id="previousPage" value="前一页"/>
    <input type="button" id="nextPage" value="下一页"/>
    
    <hr size="1"/>
    <h3>您的购物车:</h3><br/>
    <span id="cart"></span>
</body>
</html>


ManageCartServlet.java-->实现购物车信息存储的Servlet文件 
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import javax.servlet.ServletException;
import java.io.IOException;
import java.util.Hashtable;
import java.util.Iterator;

public class ManageCartServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String action = request.getParameter("action")==null?"":request.getParameter("action");
        //System.out.println("action:" + action);
        String newItem = request.getParameter("bookName")==null?"":request.getParameter("bookName");
        //System.out.println("newItem:" + newItem);

        HttpSession session = request.getSession(true);
        Hashtable ht = new Hashtable();
        String cartXml = "";
        
        //当前已经处于购物页面,并且已经处于购物状态.
        if(session.getAttribute("cart") != null){
            //System.out.println("已经处于购物状态");
            ht = (Hashtable)session.getAttribute("cart");

            //添加购物项目
            if("add".equals(action)) {
                //已经存在于购物车中的项目
                if(ht.containsKey(newItem)){
                    Integer count = (Integer)ht.get(newItem);
                    count ++;
                    ht.put(newItem, new Integer(count));
                    session.setAttribute("cart", ht);

                    cartXml = toXml(ht);
                    response.setContentType("text/xml");
					response.getWriter().write(cartXml);
                }
                //购物车中不存在的项目,现在新增加.
                else{
                    ht.put(newItem, new Integer(1));
                    session.setAttribute("cart", ht);

                    cartXml = toXml(ht);
                    response.setContentType("text/xml");
					response.getWriter().write(cartXml);
                }
            }

            //删除购物项目
            else if("remove".equals(action)){
                //System.out.println(ht == null);
                Integer count = (Integer)ht.get(newItem);
                //System.out.println(count == null);
                count --;
                if(count == 0){
                    ht.remove(newItem);
                }
                else{
                    ht.put(newItem, new Integer(count));
                }
				session.setAttribute("cart", ht);
				cartXml = toXml(ht);
				response.setContentType("text/xml");
				response.getWriter().write(cartXml);
            }
        }
        //初次进入购物页面
        else{
            //System.out.println("初次进入购物页面");
			ht.put(newItem, 1);
			session.setAttribute("cart", ht);
			cartXml = toXml(ht);
			response.setContentType("text/xml");
			response.getWriter().write(cartXml);
        }
        //System.out.println(cartXml);
    }

    //将集合的内容转换为字符串形式组成的XML数据
    public String toXml(Hashtable ht)
	{
		StringBuffer xmlDoc = new StringBuffer();
		xmlDoc.append("<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n");
		xmlDoc.append("<CART>\n");

		for (Iterator iter = ht.keySet().iterator(); iter.hasNext();)
		{
			String item = (String)iter.next();
			int Quantity = ((Integer)ht.get(item)).intValue();
			xmlDoc.append("<BOOK>\n");
			xmlDoc.append("<BookName>");
			xmlDoc.append(item);
			xmlDoc.append("</BookName>\n");
			xmlDoc.append("<Quantity>");
			xmlDoc.append(Quantity);
			xmlDoc.append("</Quantity>\n");
			xmlDoc.append("</BOOK>\n");
		}
		xmlDoc.append("</CART>\n");
		return xmlDoc.toString();
	}
}


备注：示例中使用的图片请在附件中下载！

部署说明：所有源代码以及相关文件在附件上传，只需要在IDE工具中根据以往的Java Web项目创建，然后拷贝文件到src和WebRoot就OK了。。。
  • 大小: 93 KB
  • lab.rar (40.5 KB)
  • 下载次数: 304
分享到：
| Spring框架中核心包详解
评论
1 楼 angel243fly 2010-07-21  
初学Ajax，好好研究前辈们的杰作
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    购物商城JSP课设 JSP+mysql+AJAX+分页

    JSP课设,实现的购物商城的大部分功能. 包含:源代码,sql文件,需求分析,详细分析文档 1.游客,用户,管理员,不同权限的管理 2.商品,购物车,订单的增删改查管理 3.用户,管理员的增删改查管理 4.管理员增删改查商品 5.分页...

    jsp实现的图书管理系统

    3. **功能实现**： - **增删改查**：这是任何信息管理系统的基础，JSP通过Servlet或EL（Expression Language）与JavaBean结合，实现对图书信息的添加、删除、修改和查询操作。例如，用户可以通过搜索框输入关键词...

    网上书城实现具有电子商务功能的网站，需要实现系统的后台管理功能和前台展示。其中后台使用有在线编辑、分页控件等第三方控件；前台需要含有注册码、包含验证码的登陆，分级商品浏览、购物车等功能

    在构建一个具有电子商务功能的网上书城时，我们需要关注的核心技术点主要集中在系统的后台管理和前台展示两个方面。...在开发过程中，不仅要关注功能实现，还要注重用户体验、系统安全性和性能优化。

    Ajax 实用案例大全（图书馆光盘资料）

    3. **购物车功能**：添加或删除商品，更新购物车总金额，无需跳转页面。 4. **实时评论系统**：用户发表评论后，其他用户可以即时看到，无需刷新页面。 5. **拖放上传**：使用Ajax实现文件拖放到指定区域，进度条...

    基于PHP+MySQL+Ajax实现的在线二手书交易平台+源代码+详细文档

    在这个基于PHP+MySQL+Ajax实现的在线二手书交易平台项目中，开发者使用了现代Web开发的典型技术栈，构建了一个功能完善的交互式平台，允许用户买卖二手书籍。以下是这个项目涉及的关键知识点： 1. PHP（Hypertext ...

    使用Ajax和WebService重构网上书店AjaxWebService

    在重构网上书店时，我们可以利用Ajax实现以下功能： 1. **实时搜索**：用户输入关键词时，Ajax可以即时向服务器查询匹配的书籍，展示搜索结果，而无需等待整个页面刷新。这提高了搜索效率，提升了用户满意度。 2. ...

    使用Ajax和Web Service重构网上书店(Ajax Web Service)

    2. **实时搜索**：使用Ajax实现即时搜索功能，用户输入关键词时，系统能立即返回匹配结果，无需点击“搜索”按钮。 3. **购物车交互**：用户添加或删除书籍到购物车时，Ajax可实时更新购物车状态，无需跳转页面。 ...

    ajax技术 实例大全

    repage.rar 第16章 Ajax分页 Album.rar 第17章 Ajax相册浏览 ShopCart.jar 第18章 Ajax购物车 talks.rar 第19章 Ajax在线评论 drag.rar 第20章 Ajax可拖动窗口 blog.rar 第21章 博客网站系统 news.rar 第22...

    《Java应用开发》课程设计-网上书城（含项目设计报告，sql文件，项目源码）

    主页信息展示：分页展示热门图书信息及轮播图 异步登录校验：根据用户名密码与数据库比对判定登陆与否，Ajax技术实现异步登录 注册：与用户表比对防止用户名重复，将注册信息写入数据库用户表 添加购物车：判断...

    用ajax重构网上书店

    3. **购物车**：添加或删除图书时，利用Ajax更新购物车状态，用户无需离开当前页面。 4. **用户登录/注册**：通过Ajax提交表单，验证用户信息，实时反馈错误，避免页面重载。 5. **订单处理**：创建订单、支付等操作...

    使用Ajax和Web Service重构网上书店(PPT)

    在重构网上书店时，Ajax和Web Service的结合可以实现以下功能： - **实时搜索**：用户输入关键词时，即时向服务器发送请求，返回匹配的书籍列表，无需等待整个页面刷新。 - **分页加载**：页面滚动到底部自动加载...

    jsp 实现网上书店

    此外，可以使用AJAX技术实现分页显示，提高用户体验。 **3. 搜索模块** 为了帮助用户快速找到感兴趣的书籍，网上书店通常会提供强大的搜索功能。可以利用JSP和Servlet配合，接收用户的查询条件，执行SQL查询，并...

    基于Java+MySQL实现的（Web）网上书城【100010566】

    - **Ajax分页**：使用Ajax实现无刷新分页，提高交互性，用户可以在不刷新整个页面的情况下加载更多内容。 5. **购物车功能**： - **购物车实现**：每个用户的购物车信息可以存储在数据库中，也可以使用Session...

    图书管理系统

    4. **分页功能**：为了处理大量数据，系统实现了分页功能，让用户可以逐页浏览图书。分页通常通过LIMIT和OFFSET SQL子句实现，结合前端的导航元素，如“上一页”、“下一页”，让用户轻松浏览。 5. **图书详情**：...

    基于Java+MySQL实现（Web）网上书城项目【100011159】

    在这个书城项目中，Ajax可能用于实现无刷新的分页浏览、搜索功能或者购物车操作，提升用户体验。 4. **jstl (JavaServer Pages Standard Tag Library)**：jstl是一套用于JSP的标签库，提供了许多预定义的标签，简化...

    JSP图书销售系统（课程设计）

    2. **图书展示**：展示图书列表，每个图书条目包含书名、作者、价格、库存等信息，可能通过AJAX实现分页加载或动态搜索。 3. **购物车**：用户可以将选中的图书添加到购物车，支持修改数量、删除图书，最终形成订单...

    项目说明1

    在这个项目中，Ajax用于实现无刷新的用户体验，例如登录、注册、分页显示图书信息以及购物车操作等，提高了交互性和响应速度。 2. **MySQL数据库**：MySQL是常用的开源关系型数据库管理系统，用于存储和管理项目中...

    网上书店基于JSP模式下的

    这需要用到JSP的条件判断、循环结构以及可能的Ajax技术来实现无刷新分页。 3. **详细查看**：用户点击书籍后可以查看详细的书籍信息，如作者、出版社、简介等。这需要JSP从数据库中获取并展示书籍的详细数据。 4. ...

    JavaWeb网上图书商城完整项目资料

    本系统包含九个模块，前台模块分为：用户模快，分类模块，图书模块，购物车模块，订单模块；后台模块分为：管理员模块，分类管理模快，图书管理模快，订单管理模块。书城界面简洁，易于操作，简单易懂，代码均有注释...

Magicbox
Global site tag (gtag.js) - Google Analytics