如何使用Cookie來簡單實現商城購物車的新增和清空
阿新 • • 發佈：2019-01-29
這個程式主要是有三個java程式和1個html來完成的(後面還有一個web.xml檔案),每個檔案中都有詳細的註解,所以就不再詳細介紹具體的步驟了,接下來看一看我的程式碼吧!
package com.nick.web; import java.io.IOException; import java.net.URLDecoder; import java.net.URLEncoder; import javax.servlet.ServletException; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /* * 此為第一個servlet的程式,用於新增商品放入購物車中,用的方法是在客戶端新增cookie,存放時間為7天 * */ public class Demo1 extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //從點選中獲得商品名 String pname = request.getParameter("pname"); //獲得cookie(用於判斷是否有原來的cookie) Cookie[] cookies = request.getCookies(); //cookie為空,說明是第一次 if(cookies==null){ //第一次新增cookie Cookie cookie = new Cookie("cart",URLEncoder.encode(pname,"utf-8")); cookie.setMaxAge(60*60*24*7); response.addCookie(cookie); }else{ //cookie不為空,但有可能不含我們要新增的Cookie,所以遍歷陣列來判斷 for (Cookie cookie2 : cookies) { if("cart".equals(cookie2.getName())){ //cookie中存在需要新增的cookie,那麼這就是第二次新增,兩個商品之間用"_"分割(這裡cookie鍵和值的新增因為中文的關係用到了URLEncoder.encoder和URLDecoder.decode的方法) String new_value = URLDecoder.decode(cookie2.getValue(),"utf-8")+"_"+pname; Cookie cookie = new Cookie("cart",URLEncoder.encode(new_value,"utf-8")); //cookie的存放在瀏覽器的時間為7天 cookie.setMaxAge(60*60*24*7); response.addCookie(cookie); }else{ //這裡是第一次新增cookie Cookie cookie = new Cookie("cart",URLEncoder.encode(pname,"utf-8")); cookie.setMaxAge(60*60*24*7); response.addCookie(cookie); } } } //跳轉回前端頁面 response.sendRedirect(request.getContextPath()+"/1.html"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
package com.nick.web; import java.io.IOException; import java.net.URLDecoder; import javax.servlet.ServletException; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /* * 此為第二個servlet的程式,用於解決檢視購物車的詳細情況,用到的方法為遍歷瀏覽器中發給我們的cookie * 在瀏覽器中顯示我們購物車中的商品 * * */ public class Demo2 extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //解決瀏覽器中顯示的中文亂碼問題 response.setContentType("text/html;charset=utf-8"); //獲取cookie,用於判斷是否有值 Cookie[] cookies = request.getCookies(); if(cookies==null){ //沒有商品的新增 response.getWriter().write("購物車沒有物品!"); }else{ for (Cookie cookie : cookies) { //判斷有商品新增時,就需要在瀏覽器中寫入商品 if("cart".equals(cookie.getName())){ String value = cookie.getValue(); String[] vals = value.split("_"); for (String string : vals) { //瀏覽器顯示 response.getWriter().write(URLDecoder.decode(string,"utf-8")+"\n"); } } } } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
package com.nick.web; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /* * 此為第三個servlet的程式,用於清空購物車,其方法為將瀏覽器中的cookie的值改為空(或者任意值),再講存放時間改為關閉瀏覽器cookie就消失 * */ public class Demo3 extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //中文亂碼問題 response.setContentType("text/html;charset=utf-8"); Cookie[] cookies = request.getCookies(); if(cookies==null){ response.getWriter().write("本來就沒有了!"); } for (Cookie cookie : cookies) { if("cart".equals(cookie.getName())){ //找到指定的cookie,再刪除cookie Cookie cookie1 = new Cookie("cart",""); cookie1.setMaxAge(0); response.addCookie(cookie1); response.getWriter().write("已經清空了!"); } } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button type="button" value="商品一" onclick="fn(this)" >商品一</button>
<button type="button" value="商品二" onclick="fn(this)" >商品二</button>
<button type="button" value="商品三" onclick="fn(this)" >商品三</button>
<button type="button" value="商品四" onclick="fn(this)" >商品四</button>
<button type="button" value="ccc" onclick="fn(this)" >ccc</button>
<button type="button" value="商品五" onclick="fn(this)" >商品五</button><br/>
<button type="button" onclick="fn1()" >檢視購物車</button>
<button type="button" onclick="fn2()" >清空購物車</button>
</body>
<script type="text/javascript">
function fn(obj){
//點選觸發跳轉事件,路徑為伺服器路徑(以下路徑皆為伺服器路徑)
location.href="/day15_Demo/demo1?pname="+obj.value;
}
function fn1(){
location.href="/day15_Demo/demo2"
}
function fn2(){
location.href="/day15_Demo/demo3";
}
</script>
</html><?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>day15_Demo</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<description></description>
<display-name>Demo1</display-name>
<servlet-name>Demo1</servlet-name>
<servlet-class>com.nick.web.Demo1</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Demo1</servlet-name>
<url-pattern>/demo1</url-pattern>
</servlet-mapping>
<servlet>
<description></description>
<display-name>Demo2</display-name>
<servlet-name>Demo2</servlet-name>
<servlet-class>com.nick.web.Demo2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Demo2</servlet-name>
<url-pattern>/demo2</url-pattern>
</servlet-mapping>
<servlet>
<description></description>
<display-name>Demo3</display-name>
<servlet-name>Demo3</servlet-name>
<servlet-class>com.nick.web.Demo3</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Demo3</servlet-name>
<url-pattern>/demo3</url-pattern>
</servlet-mapping>
</web-app>以上就是我要展示的程式碼,如有錯誤,請多多指正!