<script>
var options={ beforeSubmit: showRequest, success: showResponse, url:"../wthdxx/saveWthdxx", type:"post", dataType:"json" }; $("#roleForm").ajaxForm(options); //这里可以做表单字段的验证 function showRequest(formData,jqForm){ //alert("提交表单前"); var form=jqForm[0]; if(!form.classify.value){ alertDialog({message:"分类不能为空！",className:'alertWarning'}); return false; } if(!form.activityTitle.value){ alertDialog({message:"名称不能为空！",className:'alertWarning'}); return false; } if(!form.activityContent.value){ alertDialog({message:"内容不能为空！",className:'alertWarning'}); return false; } if(!form.validDate.value){ alertDialog({message:"有效天数不能为空！",className:'alertWarning'}); return false; } if(!form.isReport.value){ alertDialog({message:"是否上报不能为空！",className:'alertWarning'}); return false; }else if(form.isReport.value=="是"){ if(!form.roleId.value){ alertDialog({message:"上报人范围不能为空！",className:'alertWarning'}); return false; } if(!form.reportDeadline.value){ alertDialog({message:"截至上报时间不能为空！",className:'alertWarning'}); return false; } } if(form.description!=null){ if(!form.description.value){ alertDialog({message:"描述不能为空！",className:'alertWarning'}); return false; } } return true; } //提交表单后响应 function showResponse(response){ if(response.success){ alertDialog({message:response.message,className:'alertRight'}); setTimeout(function(){ window.location.href = ("../wthdxx/listWthdxx?currentPage=1") },1200); }else{ alertDialog({message:response.message,className:'alertWarning'}); } }
</script>
<form name="roleForm" id="roleForm" method="post" enctype="multipart/form-data" action=""> <div class="details-conment" style="margin-top:20px"> <table width="90%" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="text-align: right;"> <input type="submit" class="jumpBtn" id="saveButton" value="保存"> <input type="button" class="jumpBtn" value="关闭" onclick="jumpToList()"> </td> </tr> </table> </div> <div class="details-conment" style="margin:0px auto;"> <table class="gridtable" width="90%" style="margin:10px auto;"> <input type="hidden" name="id" id="id" value="<c:out value="${uw.id }"/>"> <tr> <td>发布时间</td> <td width="30%" id="today_time"> </td> <td>分类<font color="red" size="4">*</font></td> <td width="30%"> <select id="classify" name="classify" style="min-width:220px; height: 25px;"></select> </td> </tr> <tr> <td>名称<font color="red" size="4">*</font></td> <td width="30%"> <input type="text" id="activityTitle" name="activityTitle" style="width:300px;height:20px; border:0px;" <c:if test="${page eq 'edit'}">value="<c:out value="${uw.activityTitle }"/>"</c:if> /> </td> <td>内容<font color="red" size="4">*</font></td> <td width="30%"> <input type="text" id="activityContent" name="activityContent" style="width:300px;height:20px; border:0px;" <c:if test="${page eq 'edit'}">value="<c:out value="${uw.activityContent }"/>"</c:if> /> </td> </tr> <tr> <td>附件<font color="red" size="4"></font></td> <td colspan="3"> <c:if test="${page eq 'add'}"> <table id="fj_Creator" style="border-width:0px;"> </table> </c:if> <c:if test="${page eq 'edit'}"> <table id="fj_Creator" style="border-width:0px;"> <c:forEach var="attachment" items="${creatorAttachments }" varStatus="status"> <tr id='${attachment.id }'> <td style='border-width:0px;'> <input type='hidden' name='fj_CreatorName' /> <a style=" color:#333333 ;" href='javascript:;' onclick="downLoadFjs('${attachment.path}','${attachment.filename }')">${attachment.filename }</a> <a name='butA' href='javascript:;' onclick="delFjCreator('${attachment.id }','${attachment.filename }');"> <img src='<%=request.getContextPath()%>/themes/adinnet/images/delete.gif' title='点击删除这条信息'/></a> <a name='butA' href='javascript:addFjCreator()'><img src='<%=request.getContextPath()%>/themes/adinnet/images/icon_add.gif' width='14' height='14'/></a></td></tr> </c:forEach> </table> </c:if> </td> </tr> <tr> <td>发布单位</td> <td width="30%"> <input type="text" id="createDept" name="createDept" style="width:300px;height:20px; border:0px;" readonly="readonly" <c:if test="${page eq 'edit'}">value="<c:out value="${uw.createDept}"/>"</c:if> <c:if test="${page eq 'add'}">value="<c:out value="${deptName}"/>"</c:if> /> </td> <td>发布人</td> <td width="30%"> <input type="text" id="creator" name="creator" style="width:300px;height:20px; border:0px;" readonly="readonly" <c:if test="${page eq 'edit'}">value="<c:out value="${uw.creator }"/>"</c:if> <c:if test="${page eq 'add'}">value="<c:out value="${loginName }"/>"</c:if> /> </td> </tr> <tr> <td>有效天数<font color="red" size="4">*</font></td> <td width="30%"> <input type="text" id="validDate" name="validDate" onfocus='if(this.value=="长期"){this.value="";}' onblur='if(this.value==""){this.value="长期";}' style="width:300px;height:20px; border:0px;" <c:if test="${page eq 'edit'}">value="<c:out value="${uw.validDate }"/>"</c:if> <c:if test="${page eq 'add'}">value="长期"</c:if> /> </td> <td>是否需要上报<font color="red" size="4">*</font></td> <td width="30%"> <select id="isReport" name="isReport" style="min-width:220px; height: 25px;" onchange="isShow();"> <option value="否" <c:if test="${page eq 'add'}">selected="selected"</c:if> >否</option> <option value="是" <c:if test="${page eq 'edit' && uw.isReport eq '是'}">selected="selected"</c:if> >是</option> </select> </td> </tr> <tr id="showReport" style="display: none;"> <td>上报人范围</td> <td width="30%"> <input type="hidden" id="roleId" name="roleId" value="<c:out value="${uw.role.id }"/>" readonly="readonly"/> <input type="text" id="roleName" name="roleName" style="width:220px;height:20px;" readonly="readonly" <c:if test="${ !empty uw.role }"> value="<c:out value="${uw.role.name }"/>" </c:if> /> <input type="button" class="add_but_80" onclick="getReportRange()" value="选择"/> </td> <td>截至上报时间</td> <td width="30%"> <input type="text" id="reportDeadline" name="reportDeadline" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',lang:'zh-cn'})" <c:if test="${page eq 'edit'}">value="<fmt:formatDate pattern='yyyy-MM-dd' value='${uw.reportDeadline}'/>"</c:if> style="width:120px;cursor: pointer;" /> </td> </tr> </table> </div> </form>
使用jquery-form.js异步提交表单，
1、提交表单前对表单字段的验证
2、提交表单后对操作的响应
当表单提交后，表单里有name属性的字段传递到后台，后台可以用HttpServletRequest 接收这些字段，也可以用@RequestParam来接收这些字段，个人建议大量字段时用HttpServletRequest方便一些
另外附件的接收要用@RequestParam("fj_CreatorName") MultipartFile[] filesCreator 其中fj_CreatorName是指 以 <input name="fj_reporterName'" type="file"/> 的name命令的附件，可以接受多个附件上传
后台部分：
@RequestMapping(value="/saveWthdxx") @ResponseBody public ResultMessage saveUnionwpWthdxx(HttpServletRequest request,@RequestParam("fj_CreatorName") MultipartFile[] filesCreator,@RequestParam(value="id",required=false) String id){ ResultMessage resultMessage = new ResultMessage(); // String loginName=request.getHeader("iv-user"); String loginName="admin_dx"; UnionwpWthdxx unionwpWthdxx=null; Role role=null; try { if(StringUtils.isNotEmpty(id)) { unionwpWthdxx=unionwpWthdxxService.getByid(id); } if(StringUtils.isEmpty(id)){ unionwpWthdxx=new UnionwpWthdxx(); unionwpWthdxx.setId(null); unionwpWthdxx.setCreateTime(new Date()); } System.out.println("------------------------------"); String classify=request.getParameter("classify"); String activityTitle=request.getParameter("activityTitle"); String activityContent=request.getParameter("activityContent"); String createDept=request.getParameter("createDept"); String creator=request.getParameter("creator"); String validDate=request.getParameter("validDate"); String isReport=request.getParameter("isReport"); String roleId=request.getParameter("roleId"); String reportDeadline=request.getParameter("reportDeadline"); unionwpWthdxx.setClassify(classify); unionwpWthdxx.setActivityTitle(activityTitle); unionwpWthdxx.setActivityContent(activityContent); unionwpWthdxx.setCreateDept(createDept); unionwpWthdxx.setCreator(creator); unionwpWthdxx.setValidDate(validDate); unionwpWthdxx.setIsReport(isReport); if(StringUtils.isNotEmpty(roleId)){ role=roleService.getRoleById(roleId); if(role!=null){ unionwpWthdxx.setRole(role); } } if(StringUtils.isNotEmpty(reportDeadline)){ DateFormat df = new SimpleDateFormat("yyyy-MM-dd"); unionwpWthdxx.setReportDeadline(df.parse(reportDeadline)); } unionwpWthdxx=unionwpWthdxxService.save(unionwpWthdxx); //处理附件上传 if(filesCreator!=null&&filesCreator.length>0){ Set<UnionwpAttachment> attachments=new HashSet<UnionwpAttachment>(); for (int i = 0; i < filesCreator.length; i++) { UnionwpAttachment attachment=new UnionwpAttachment(); MultipartFile file=filesCreator[i]; String filename=file.getOriginalFilename(); String ext=filename.substring(filename.lastIndexOf(".")); FileSaveResult result=ftpFileAccess.saveFileToFTP(file, getFileName()+ext); System.out.println(result.getFileName()+"---------"+result.getFilePath()); attachment.setCategory("creatorFj"); attachment.setCreateTime(new Date()); attachment.setCreator(loginName); attachment.setFilename(result.getFileName()); attachment.setFilesize(formetFileSize(result.getSavedSize())); attachment.setPath(result.getFilePath()); attachment.setReferenceid(unionwpWthdxx.getId()); attachments.add(attachment); unionwpAttachmentService.saveUnionwpAttachment(attachment); } unionwpWthdxx.setAttachments(attachments); } resultMessage.setCode("1"); resultMessage.setMessage("操作成功!"); } catch (IllegalArgumentException e) { resultMessage.setCode("0"); resultMessage.setMessage(e.getMessage()); } catch (Exception e) { e.printStackTrace(); resultMessage.setCode("0"); resultMessage.setMessage("系统错误"); } return resultMessage; }