Spring前端开发笔记(HTML+jQuery+Ajax)【二】

Spring前端开发笔记(HTML+jQuery+Ajax)【二】

又是debug的一天，下面说一下今天遇到的问题。

1）Ajax实现局部网页刷新

网站想设计一个div，可以随添加购物车操作(addCart)局部刷新，显示购物车中商品数量。

前端代码

//添加购物车
function addCart(btn){
	var postDate = {"productID":btn.value};
	 $.ajax({
	        type: 'POST',
	        url: "/product/addCart",
	        dataType: "json",
	 		data: postDate ,  
	 		error : function() {
	 	        alert("添加购物车失败!!!");
	 	    },
	        success: function (data){
		 		$('#cartCount').empty();
		 		var cartCount = data.cartCount;
		 		var newCode = document.createElement('div');
		 		newCode.setAttribute("class","col-md-4");
			 		var htmlCode ="<span>购物车中有"+cartCount+"件商品!</span><br/>";
		 		//将要展示的信息写入页面
					newCode.innerHTML = htmlCode;
				//将信息追加
				$("#cartCount").append(newCode);	
			}
	})
}

<!-- 购物车回应 -->
<div class="row" id="cartCount">
	<div class="col-md-4">
		<span th:if="${session.COUNT_IN_CART != null}" th:text="'购物车中有'+${session.COUNT_IN_CART}+'件商品!'"></span><br/>
	</div>
</div>

后台controller

@SuppressWarnings("unchecked")
@RequestMapping("/addCart")
public String addCart(@RequestParam("productID") String productID, HttpSession session) {

	Map<String, Integer> cartMap = new HashMap<String, Integer>();
	if (session.getAttribute("LIST_IN_CART") != null) {
		cartMap = (Map<String, Integer>) session.getAttribute("LIST_IN_CART");
	}

	boolean ifHadKey = false;
	String hadKey = null;
	int orValue = 0;
	int cartCount = 0;
	for (String key : cartMap.keySet()) {
		if (key.equals(productID)) {
			hadKey = productID;
			ifHadKey = true;
			break;
		}
	}

	if (ifHadKey) {
		orValue = cartMap.get(hadKey);
		cartMap.put(hadKey, orValue + 1);
	} else {
		cartMap.put(productID, 1);
	}

	session.setAttribute("LIST_IN_CART", cartMap);

	cartCount = cartMap.size();
	session.setAttribute("COUNT_IN_CART", cartCount);
	
	System.out.println("addCart方法被调用......");
	System.out.println("商品" + productID + "被添加到购物车......");
	System.out.println(cartMap);

	// json 回传数据需严格遵循格式，否则ajax会进入error
	String json = null;
	json = "{" + "\"cartCount\": \"" + cartCount + "\"" + "}";
	return json;

}

初步构想是在html页中放置div读取COUNT_IN_CART的session，这样在购物车中有记录的时候就能显示。但这样需要网页刷新时才能有反应。所以准备应用Ajax，在addCart触发时局部刷新该div。

具体的方法是：
1.用var newCode = document.createElement(‘HTML_label’);方法新建一个div。[其中可以通过newCode.setAttribute(“属性名”,“属性名称”);赋予div属性。]
2.接下来就是innerHTML的构建，也就是div内部的代码。
1）应用原有代码，进行字符串拼接，实现刷新
但拼接过程中发现需要三层引号嵌套，且不利于维护与修改，于是放弃。
三层引号嵌套原则：外层用双引号，内层用转义双引号，第三层用单引号。参考示例
2）用document.getElementsById("").innerHTML获取，实现刷新
但发现获取的并不是源代码，而是运行后的代码：

<!-- 购物车内无商品 -->
<br/>
<!-- 购物车内有1件商品 -->
<span>购物车中有1件商品!</span><br/>
<!-- 购物车内有2件商品 -->
<span>购物车中有2件商品!</span><br/>
....

于是放弃了这一方案。
3）通过Ajax回传的date，重写语句覆盖，也就是将购物车内商品数封装成json数据回传
这一方法经验证后确实可行！！！
如上述代码所示。

3.还有一点需要提示

“#“用来标记id
$(”#id_name”).action();
“.“用来标记class
$(”.class_name”).action();

2）@Results用法总结

下面这篇博客整理的很细致，我在此就不重复了：参考博客