三级联动 ======
使用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配置文件放在上面。
