本文介绍使用JSON和拆分字符串实现前端三级联动的选择框功能，以及如何在JSP页面实时预览上传的图片，还涉及了使用jQuery动态添加和删除HTML元素的方法。
-
三级联动
====== -
使用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配置文件放在上面。
扫一扫
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
