大家在淘寶或者天貓上購物的時候,都會發現自己的購物車隨著自己的點選而使頁面出現一些變化。例如,當我們點選多選框是,左下方的總價就會發生改變。作為後臺的管理者,我們同樣需要對使用者的購物車清理(也就是使用者購買購物車中的商品時)執行一些相應的業務邏輯操作。我選擇的方式就是使用ajax的方式進行操作。

        首先我需要先對我的購物車進行一個簡要的模擬。

@RequestMapping("/shoppingCarInit")
 public String shoppingCarInit(HttpSession session){
		List<Goods> goodsList = new LinkedList<Goods>();
		 for(int i=0;i<5;i++){
			 goodsList.add(i, new Goods("商品"+(i+1),10.4*(i+1)));
		 }
	 session.setAttribute("goodsList", goodsList);
	 return "ajax/shoppingAction";
 

之後跳轉到我的jsp測試頁面

那麼我們可以隨機選擇幾個商品進行測試了

當我們點選確認清算按鈕時,我們可以從後臺列印的資訊中進行了解.

2
Goods [goodsName=商品2, goodsPrice=20.8]
Goods [goodsName=商品4, goodsPrice=41.6]
priceTotal----->62.400000000000006

我們可以看到,值確實傳遞到了後臺.

ajax的js程式碼如下:

function sendInfo(){
	var goodsIndex = document.getElementsByName("goodsIndex");
	var a = 0;
	for(var i=0;i<goodsIndex.length;i++){
		var index = i;
		var status = goodsIndex[i].checked;
		var param = "{'index' : "+index+",'status':"+status+"}";
			$.ajax({
				url:"${pageContext.request.contextPath}/shoppingAction/doShoppingAction.action",
				data:param,
				dataType:"json",
				contentType:"application/json;charset=UTF-8",
				type:"post",
				success:function(data){
					alert(data);
				}
			});
		
	}
	
}
 

後臺的接受程式碼如下;

@RequestMapping("/doShoppingAction")
@ResponseBody()
public void doShoppingAction(@RequestBody(required=false) StatusPOJO sp,HttpSession session,HttpServletResponse response) throws IOException{
Map<Integer,Goods> map =new HashMap<Integer,Goods>();
if(session.getAttribute("tempMap")!=null){
map=(Map<Integer,Goods>)session.getAttribute("tempMap");
};
if(sp.isStatus()){
System.out.println("這次新增進去的商品編號是:"+sp.getIndex());
map.put(sp.getIndex(), ((List<Goods>)session.getAttribute("goodsList")).get(sp.getIndex()));
}else{
if(map.get(sp.getIndex())!=null){
System.out.println("這次刪除的商品編號是:"+sp.getIndex());
map.remove(sp.getIndex());
}
}
session.setAttribute("tempMap", map);
//response.getWriter().write("success");
}
 

要點解析:

1.首先我們要將選中的編號通過ajax的方式傳遞到後臺,這個要怎樣實現呢?

我們都會使用<c:foreach>標籤實現傳入的連結串列的迭代,所以我們如果想要將選中的序號傳遞到後臺(這個序號和後臺傳遞過來的連結串列中的對應資訊在連結串列中的位置是相同的.)，我們需要藉助<c:foreach>中的varStatus屬性,定義很簡單varStatus='status';將我們複選框的value值設定成${status.index}.這個是從0開始的排序.然後就是將這個值通過js物件的方式傳遞到後臺.這個地方我們需要使用一下字串的拼接.

var param = "{'index' : "+index+",'status':"+status+"}";

這樣我們就可以將我們想要傳遞的var變數資訊傳遞到後臺。然後我們需要設計一個POJO物件來接受我們的這兩個引數的資訊。

2.

關於這些傳入後臺的POJO資訊,我們該怎樣實現利用呢。在這個地方,我使用了一下session，建立了一個臨時的map（tempMap）來儲存需要購買的商品資訊。那麼這個地方我們又會遇到一個問題,為什麼要用map呢。很簡單，我們可能會修改我們的複選框的資訊，這樣有些資訊就會重複新增，這顯然不符合我們的要求。所以我選擇了map來儲存。至於為什麼將他們儲存到session,這也很簡單。這個map需要在不同的路徑間進行跳轉.所以我才使用了map。

相關的全部程式碼我都打包到了一個壓縮包裡,大家可以檢視部署測試

https://pan.baidu.com/s/1jIU2FFC