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

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

Spring Boot推荐使用html作为前端，但相较于php与jsp，html在动态网页制作中还是有些逊色，但JavaScript与Ajax的应用很好的弥补了这些不足,以下是我在开发过程中遇到的一些问题及解决方案。

开发过程中逐渐明白了以下问题，以下为参考博客：
spring boot与spring mvc的区别是什么？
jQuery与JavaScript与ajax三者的区别与联系

1）在不能确定button id属性的情况下调用JavaScript或jQuery

传统调用方法可参考这篇文章
基本上是使用 document.getElementById(“targetID”).onclick();和$("#targetID").click(function(){//TODO})来实现。

我在写购物网站的时候需要用ajax获取产品列表并遍历输出，每一个产品都有添加购物车的button，所以触发添加购物车的操作很难用指定id来实现(尝试了使用统一id的方法，但是无效)。

百度上的这个回答给了我的新的思路
回答中用button的onclick属性来调动指定的js操作，这就要求操作有指定的名称，所以我使用了js定义操作，而没有使用jquery。

前端代码

//显示产品列表
$(document).ready(function(){
    $.ajax({
        type: 'POST',
        url: "/product/showAllProduct",
        contentType: "application/json;cherset=utf-8",
        dataType: "json",
        success: function (data){
			$('.newCode').empty();
	        //取出后端传过来的list值
			var productList = data;
	        //对list值进行便利
			$.each(productList, function (index, n) {
            var newCode = document.createElement('div');
			newCode.setAttribute("class","col-md-4 col-sm-6");
			var htmlCode = "<a href=''> <img src='img/" + productList[index].picAddress + "'" + "alt='样图'/></a>"
				+ "<div class='captio'>"
					+ "<h4>" + productList[index].productName + "</h4>"
					+ "<p>" + productList[index].description + "</p>"
					+ "<p>售价：" + productList[index].price + "</p>"
				+ "</div> "	
				/**
				  *关键操作->为button onclick属性赋值
				  */							
				+ "</div><button type='button' value='" + productList[index].productID + "' onclick='addCart(this)'>添加购物车</button></div>"						
			//将要展示的信息写入页面
			newCode.innerHTML = htmlCode;
			//将信息追加
			$(".newCode").append(newCode);	
			})
		}
	})
})

//添加购物车操作
function addCart(btn){
	var postDate = {"productID":btn.value};
	 $.ajax({
	        type: 'POST',
	        url: "/product/addCart",
	        //不写contentType: "application/json” 即默认为json数据，写了就认为是json字符串
	        //contentType: "application/json;cherset=utf-8",
	        dataType: "json",
	 		data: postDate ,  
	 		error : function() {
	 	        alert("添加购物车失败!!!");
	 	    },
	        success: function (data){
		 		//TODO
			}
	})
}

2）Ajax传递json数据，后台取值为null

错误的原因在于json数据与json字符串的混用，json数据不需要添加contentType: "application/json” ，从上面的第二段代码(添加购物车操作)可以体现。
json数据与json字符串混用辨析可以参考这篇文章

3）Ajax传递json数据，后台运行正常，返回值调用error操作

错误的原因在于返回值需为json格式。

后台代码

@RequestMapping("/addCart")
public String addCart(@RequestParam("productID") String productID){
	System.out.println("addCart方法被调用......");
	System.out.println("商品" + productID + "被添加到购物车......");
	
	//json 回传数据需严格遵循格式，否则ajax会进入error
	String json = null;
	json = "{" +"\"productID\": \"" + productID + "\""+"}";
	return json;			
}

解决方法来自这篇文章
PS：使用 return “1”;也可以成功调用success操作，可能是直接默认返回值为是，触发操作，具体原因还不太清楚。