乐鲜生活后台管理系统--项目总结-优快云博客

本文链接：https://blog.youkuaiyun.com/Artisters/article/details/61662996

本文介绍使用JSON和拆分字符串实现前端三级联动的选择框功能，以及如何在JSP页面实时预览上传的图片，还涉及了使用jQuery动态添加和删除HTML元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三级联动
======
使用JSON处理数据实现
前端–使用JQ类库中Ajax异步提交的方式，配合JSON实现

<script src="js/easyui/jquery.min.js" type="text/javascript"></script>	
<script type="text/javascript">			
$(function(){		
/*一级Ajax*/			
	$("#fir_select").change(function(){						
		var id_1 = $("#id_1").val();					
		if(id_1==""){					
			$("#sec_select").empty();				
			$("#sec_select").append("<option value='请选择'>--请选择--</option>");				
			$("#thi_select").empty();				
			$("#thi_select").append("<option value='请选择'>--请选择--</option>");				
		}else{					
			$.ajax({				
				type:"POST",                         //使用POST形式进行提交			
				url:"login/findcitysbyparentid.do",	 //对应的controller方法		
				dataType:"json",			         //以什么方式进行返回
				data:{id:id_1},                      //id为参数名，id_1为参数值，多个参数用","隔开			
				success:function(data){			     //成功返回后
					if(data!="{}"){		
						$("#sec_select").empty();    //清空标签中内容	
						$("#sec_select").append("<option value='请选择'>--请选择--</option>");	
						$("#thi_select").empty();    //清空标签中内容	
						$("#thi_select").append("<option value='请选择'>--请选择--</option>");		
						$.each(data,function(i, item)  {	
							//添加子标签方法二：append方法
							var statem = "<option value='"+item.id+"'>"+item.city+"</option>";
							$("#sec_select").append(statem);
						});	
					}		
				},			
				error:function(){			          //发生错误时之行
					alert("方法执行不成功!");		     
				//注意，如果controller中数据发生异常不能正确返回，例如有的数据为null或者发生除数为0
				}			
			});	
/*二级Ajax*/						
	$("#sec_select").change(function(){										
		var sec_select= $("#sec_select").val();					
		if(sec_select==""){					
			$("#thi_select").empty();				
			$("#thi_select").append("<option value='请选择'>--请选择--</option>");				
		}else{					
			$.ajax({				
				type:"POST",			
				url:"login/findcitysbyparentid.do",			
				dataType:"json",			
				data:{id:sec_select},			
				success:function(data){				
					if(data!="{}"){		               //如果返回的是空值
						$("#thi_select").html("");     //清空标签中内容	
						$("#thi_select").append("<option value='请选择'>--请选择--</option>");	
						$.each(data,function(i, item) {	
							var statem = "<option value='"+item.id+"'>"+item.city+"</option>";
							$("#thi_select").append(statem);
						});	
					}		
				},			
				error:function(){			
					alert("方法执行不成功!");		
				}			
			});				
		}					
	});						
});							
</script>

 2.  对应controller中

/**
 1. Ajax请求得到子类商品信息 post方式，返回类型为json
 2. @return  @ResponseBody注解告诉SpringMVC该方法返回的不是一个视图
 3. method = RequestMethod.POST 此方法只允许以POST形式访问
 4. produces = "application/json;charset=UTF-8" 以JSON形式返回，字符型为UTF-8 不加会是乱码
 */
	@ResponseBody
	@RequestMapping(value = "/findcitysbyparentid.do", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
	public List<Citys> findCitysByParentId(Citys citys) {
		//执行Service层的方法
		List<Citys> cityslist = this.storeManageService.searchCitysByParentId(citys);
		return cityslist;// 在这里配置文件和jackson工具就自动转化了，直接返回对象即可
	}

 这里需要注意需要倒6个Json.jar包

使用野路子–拆字符串的方式实现三级联动
通过拆分字符串的形式来实现三级联动数据–同样使用的JQ中Ajax的$.get

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
		$(function() {
	      	$("#firstInfo").change(function(){
		      	var info=$("#firstInfo").val();
	      		$("#secondInfo").html("");                         //清空二级对应数据
	           	$.get("secondInfo.do",{info:info},function(data) {
		           	//{info:info} 是Ajax中请求的参数，在controller中可以捕获
	                var strInfo=data.split("#");                   //这里进行字符串解读
	            	for(var i=0;i<strInfo.length;i++){
	            		var arr=strInfo[i].split(":");             //这里进行字符串解读
	            		$('#secondInfo').append('<option value="' + arr[0] + '">' + arr[1] + '</option>');
            	}
            });
        });
      	  
      	$("#secondInfo").change(function(){
	      	var info=$("#secondInfo").val();
      		$("#thirdInfo").html("");                               //清空二级对应数据
           	$.get("secondInfo.do",{info:info},function(data) {
	            var strInfo=data.split("#");                        //这里进行字符串解读 
	            for(var i=0;i<strInfo.length;i++){
	            var arr=strInfo[i].split(":");                      //这里进行字符串解读
	            $('#thirdInfo').append('<option value="' + arr[0] + '">' + arr[1] + '</option>');
            	}
            });
        });
    });
</script>

2. 对应controller多了合并字符串操作

@RequestMapping(value = "/secondInfo.do", produces = "text/plain;charset=UTF-8")
@ResponseBody // 告诉springMVC返回的不是一个视图
public String selectCommodityInfo(String info) {
	int parentId = Integer.parseInt(info);
	List<Category> catList = this.commodityInfoService.selectOtherNameByParentId(parentId);
	String secondName = "";
	for (Category category : catList) {
		secondName = secondName + "#" + category.getId() + ":" + category.getCategoryname();
	}
	secondName = secondName.substring(1, secondName.length());
	return secondName;
}

总结：两种写法都可以实现，JSON高端了很多，这应该也是单位中三级联动的常用写法，拆分字符串体会下也好。

JSP界面显示上传图片
=======
概述：在当前JSP界面显示上传图片，并不提交到后台而是在网页上显示上传的图片。
—使用javascript实现

//使用通过拼接ID名字来获取不同ID达到使用不同对象
function setImagePreview(avalue) {
		var docObj = document.getElementById("doc" + avalue);
		//这里可以把docObj.files看成数组-->存在-->true
		//这里可以把docObj.files[0]看成数组中第一个元素-->存在-->true
		//两者都为真是--才执行
		if (docObj.files && docObj.files[0]) { 
			if(avalue == 1){
				var imgObjPreview = document.getElementById("preview" + avalue);
				//火狐下，直接设img属性
				imgObjPreview.style.display = 'block';
				imgObjPreview.style.width = '230px';
				imgObjPreview.style.height = '280px';
				//imgObjPreview.src = docObj.files[0].getAsDataURL();
				//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
				imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
			}else if (avalue == 2) {
				for(var i=0;i<docObj.files.length;i++){
					var id="preview"+(i+2);
					var hidID="hid"+i;
					var imgObj=document.getElementById(id);
					var hid=document.getElementById(hidID);
					hid.style.display = 'block';
					imgObj.style.display = 'block';
					imgObj.style.width = '100px';
					imgObj.style.height = '150px';
					imgObj.src = window.URL.createObjectURL(docObj.files[i]);
				}
			}
		} else {
			//IE下，使用滤镜
			//alert("IE下");
			docObj.select();
			var imgSrc = document.selection.createRange().text;
			var localImagId = document.getElementById("localImag" + avalue);
			//必须设置初始大小
			localImagId.style.width = "150px";
			localImagId.style.height = "180px";
			//图片异常的捕捉，防止用户修改后缀来伪造图片
			try {
				localImagId.style.filter = 
				"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
				localImagId.filters
				.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
			} catch (e) {
				alert("您上传的图片格式不正确，请重新选择!");
				return false;
			}
			imgObjPreview.style.display = 'none';
			document.selection.empty();
		}
		return true;
	}

对应的file标签

<div class="upload_img">
	<div class="font_div">商品主图：</div>
	<div class="img_div" id="localImag1">
		//${commodity.pictureurl}为项目中的原图片
		<img id="preview1" src="<%=basePath%>${commodity.pictureurl}"
		 style="width: 230px; height: 280px">
	</div>
	<div class="img_div">
		<input type="hidden" name="pictureurl" id="textfield"> 
		<input type="file" name="myfiles" id="doc1" style="width: 150px;" 
		onchange="document.getElementById('textfield').value=this.value">
	</div>
	<input type="button" value="上传主图" class="input_sunmit"
	onclick="javascript:setImagePreview(1);">
</div>

使用JQ添加删除HTML元素
=================
概述：使用JQ中的append添加属性，并且标签中带有删除此标签的button
1.JQ部分

<script type="text/javascript">
	$(function() {
		var i = 100000000;//通过拼接添加ID值，使用这个避免与原数据冲突--有点逗逼见谅
		$("#addkind")
			.click(
				function() {
					var ikey = $('#kindkey').val();
					var value = $('#kindvalue').val();
					var num=0;
					ikey = ikey.toString();
					value = value.toString();
					if(ikey!=""&&value!=""){
						var ret = ikey + ":" + value;
						var arr = $('.kindInfo');
						$.each(arr,function(i,item){
							var a = $(this).attr("value");
							if(a==ret){
 								num=1;
 							}
						});
						if(num==0){
							$('#kind').append(
				"<div class='littleInfo'><span class='spanfont'>"+ret+"</span>
				+ <input type='button' class='delete_in' value='X'id='delete_in"+i+"' 
				+ onclick='deleteKind("+ i+ ")'/>
				+ <input type='hidden' name='kind' class='kindInfo' value='"+ret+"'></div>")
				//这里使用hidden标签用来记录用户添加的值
							i++;
						}else{
							alert("标签以存在");
						}
					}
				});
//通过拼接JQ中append添加的button ID的方试打到删除对应的父级标签---达到删除全部的目的
function deleteKind(i) {
	var id = "delete_in" + i;
	$('#div_hidden').append("<input type='hidden' name='deleted' value='"+i+"'>");
	//hidden 用来记录被删掉的数据--与后台交互，删除数据库中数据
	document.getElementById(id).parentElement.remove();
	}
</script>

注意：java长使用hidden来记录被删除掉的数据，来实现form表单提交与后台交互

2.页面部分

<div class="top_box">
	规格信息：规格组： 
	<input type="text" name="kindkey" id="kindkey" />
	规格名： 
	<input type="text" name="kindvalue" id="kindvalue" /> 
	<inputtype="button" value="+" id="addkind" />
	<hr>
	<div class="kind_div" id="kind">
	<!--这里为原数据在此循环输出-->
		<c:forEach items="${specList}" var="key">
			<div id="father_div" class='littleInfo'>
				<span class='spanfont'>${key.specGroup}:${key.specName}</span>
				<input type='button' class='delete_in' value='X' id='delete_in${key.specid}' 
				onclick='deleteKind(${key.specid})'/>
			</div>
		</c:forEach>
	</div>
	<!--用来记录被用户删除掉的数据，与后台交互，删除掉数据库中数据-->
	<div id="div_hidden"></div>
</div>

SpringMVC中文件的上传下载
=======
概述：做到多文件的上传下载，以及表单提交数据更新，只使用一次表单提交

1.JSP界面

<!--使用form表单进行稳健上传时，一定要加enctype="multipart/form-data" 并且请求方式要为method="post"-->
<!--enctype="multipart/form-data" 可以将文件转成二进制，并且保存在请求头中，在controller中进行解析-->
<form action="updateCommodityInfo.do" method="post" enctype="multipart/form-data">
<div class="upload_img">
	<div class="font_div">商品配图：</div>
	<!--使用表达式  循环改变标签的ID打到定位删除效果-->
	<div class="img_div" id="localImag2">
		<%int i = 10;%>
		<c:forEach items="${comList}" var="key">
			<div class="img_div2">
				<img id="preview<%=i%>" src="<%=basePath%>${key.pictureUrl}"
				style="width: 100px; height: 150px"> 
				<input type="button" class="input_css" value="X"
				onclick="deleteImg('<%=i%>','${key.id}','${key.pictureUrl}')" />
				<%i++;%>
			</div>
		</c:forEach>
	</div>
	<div id="div_img_hidden"></div>
	<div class="img_div">
		<!--multiple="multiple"添加此属性 type="file" 控件可以同时上传多个文件-->
		<input type="file" multiple="multiple" name="myfiles" id="doc2" style="width: 150px;"
		onchange="document.getElementById('textfields').value=this.value">
	</div>
	<!--onclick="javascript:setImagePreview(2);"对应上面在JSP网页显示图片的script-->
	<input type="button" value="上传配图" class="input_sunmit" onclick="javascript:setImagePreview(2);" />
</div>
<hr>
<div class="top_box">
	<center>
		<input type="submit" value="保存信息" class="input_sunmit" />
	</center>
</div>		
</form>

2.对应controller

/**
 *@RequestParam MultipartFile[] myfiles 
 *myfiles 为JSP界面中对应file标签的name ---> 是一个数组
 *@RequestParam 根据name捕获
 */
@RequestMapping("/updateCommodityInfo.do")
public String upload(@RequestParam MultipartFile[] myfiles, HttpServletRequest request) throws IOException {
	/**
	 * 因为请求被enctype="multipart/form-data"变为二进制，需要使用springMVC中的
	 * MultipartHttpServletRequest 类对request进行强转，
	 * 这里使用multiRequest 获得的表单提交的数据都是multiRequest在请求头中以二进制进行转码获得的数据
	 */	
	MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
	//多张图片存在配图--在这里捕获配图名存到assiFile 这个集合中
	List<String> assiFile = new ArrayList<String>();
	//获取主图文件名
	String pictureurl = multiRequest.getParameter("pictureurl");
	//去掉fakepath获取主图文件名
	pictureurl = pictureurl.substring(pictureurl.lastIndexOf("\\") + 1, pictureurl.length());
	//获取服务器保存图片的路径
	String urlPath = request.getSession().getServletContext().getRealPath("commodity") + File.separator;
	for (MultipartFile file : myfiles) {
		// 此处MultipartFile[]表明是多文件,如果是单文件MultipartFile就行了
		if (file.isEmpty()) {
			System.out.println("文件未上传!");
		} else {
			// 得到上传的文件名
			String fileName = file.getOriginalFilename();
			if (fileName.indexOf(pictureurl) == -1) {
				assiFile.add(fileName);
			}
			// 服务器路径+图片名 图片的保存地址和文件名
			String path = urlPath + fileName;
			// 查看文件上传路径,方便查找，把文件上传至path的路径
			File localFile = new File(path);
			//写入
			file.transferTo(localFile);
		}
	}
}

注意：在request中获得文件路径为伪路径，获取真实路径需要在JS中操作，在controller中获得的是C://fakepath/xxxxx.jpg

关于form表单提交乱码问题
=================

概述：在web.xml中配置拦截器filter过滤器，一次性解决，不需要使用String–byte[]单句转换

 <filter>
    <filter-name>characterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  单句转换方式

//先将字符转成最小字符格式iso-8859-1----再转成支持中文的utf-8
info = new String(info.getBytes("iso-8859-1"), "utf-8");

注意：使用配置filter过滤器必须以POST形式提交，GET还需要手动转码，配置是注意将filter配置文件放在上面。