欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-03 21:14:14
1)在不能确定button id属性的情况下调用JavaScript或jQuery2)Ajax传递json数据,后台取值为null3)Ajax传递json数据,后台运行正常,返回值调用error操作...

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