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操作,可能是直接默认返回值为是,触发操作,具体原因还不太清楚。
本文地址:https://blog.csdn.net/sinat_36329095/article/details/85984540
推荐阅读