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用法总结
下面这篇博客整理的很细致,我在此就不重复了:参考博客