近期遇到项目中,一个页面有4个选项卡,8个表单,如果不涉及文件上传,直接用ajax异步提交比较简单,但是偏偏有好几个表单是夹杂了文件上传,传统的异步提交需要分次,比较麻烦。经同学推荐jquery.form.js,实现表单异步提交,简单清爽。
例如(拿其中一个选项卡举例,具体css不予给出)
<div class="right-content hidden" id="education-info">
<div class="add-education">
<span>新增学历</span>
</div>
<form th:action="@{/staffeducation/addorset}" method="post" id="educationForm" enctype="multipart/form-data">
<div class="">
<!-- 学历 -->
<div class="education-background clearfix">
<span>学历</span>
<input type="hidden" name="staffId" th:value="${staff.staffId}"/>
<input type="hidden" id="educationId" name="educationId" />
<select name="education" id="education">
<option value="初中及以下">初中及以下</option>
<option value="高中">高中</option>
<option value="中技">中技</option>
<option value="中专">中专</option>
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="MBA">MBA</option>
<option value="博士">博士</option>
</select>
<label><input type="checkbox" value="1" id="educationIsHigh" name="educationIsHigh" /> 最高学历</label>
</div>
<!-- 学历类型 -->
<div class="education-type clearfix">
<span>学历类型</span>
<select name="educationType" id="educationType">
<option value="全日制学历" >全日制学历</option>
<option value="非全日制学历" >非全日制学历</option>
</select>
</div>
<!-- 毕业学校 -->
<div class="graduate-school clearfix">
<span>毕业学校</span>
<input class="form-control" name="educationSchool" id="educationSchool" type="text" maxlength="15" />
</div>
<div class="graduate-school clearfix">
<span>毕业专业</span>
<input class="form-control" name="educationMajor" id="educationMajor" type="text" maxlength="15" />
</div>
<!-- 毕业时间 -->
<div class="graduation-date clearfix">
<span class="date-graduation">毕业时间</span>
<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="educationTime" data-link-format="yyyy-mm-dd">
<input class="form-control" type="text" value="" readonly="readonly" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="educationTime" name="educationTime" value="" />
</div>
<!-- 附件 -->
<div class="uplaod-accessory clearfix">
<span>附件</span>
<div class="uplaod-btn">
<div class="uplaod-click">点击上传</div>
<input type="file" id="education_picture" name="img" title="点击上传" />
</div>
<div class="uplaod-succeed hidden" title="点击预览">
<span class="file-name" id="education_filename" data-url=""></span>
</div>
</div>
<div class="uplaod-hint">
请上传学历证书的照片,照片大小不超过10M,附件支持格式:'jpg', 'bmp', 'png'
</div>
<div class="submit-btn">
<button class="btn btn-default submit" type="submit">提交</button>
<button class="btn btn-default back" type="button">取消</button>
</div>
</div>
</form>
</div>
juqery.form.js异步提交表单实现方法不唯一,这里我用ajaxForm
$(function()
{
//配置表单异步提交
$('#educationForm').ajaxForm({
beforeSerialize:assembled_education_form,//表单序列化之前处理某些表单控件值,return false 则表单不提交
beforeSubmit : validate_education_form,//表单异步提交之前进行表单值合法性验证,return false 则表单不提交
success : function(data) {
if(data.state == "200")
{
// alertShow("保存成功");
//表单提交成功,异步刷新列表
$.ajax({
url:"/staffeducation/getlist",
type:"get",
data:{staffId:$("#staffId").val()},
success:function(data)
{ //模板引擎返回局部页面
$("#education_table").replaceWith(data);
$("#staffContent").removeClass("hidden");
$("#education-info").addClass("hidden");
}
});
}
else
{
alertShow("保存失败:"+ data.msg);
}
status = true;
$("#educationTime").val(""); //隐藏域不清空,需要手动清空表单
},
error:function(data){
status = true;
$("#educationTime").val(""); //隐藏域不清空,需要手动清空表单
},
resetForm : true //清空表单
});
})
function assembled_education_form(form,options)
{
return true;
}
function validate_education_form(formData, jqForm, options)
{ //防止连续点击,表单重复异步提交
if(status)
{
$("#education_picture").poshytip("hide");
$("#educationSchool").poshytip("hide");
$("#educationSchool").poshytip({
content: '学校不能为空!',
showOn: 'none',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5
});
$("#educationMajor").poshytip("hide");
$("#educationMajor").poshytip({
content: '专业不能为空!',
showOn: 'none',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5
});
$("#educationTime").prev().find("input").poshytip("hide");
$("#educationTime").prev().find("input").poshytip({
content: '日期不能为空!',
showOn: 'none',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5
});
status = false;
var flag = true;
for(var i in formData)
{
switch (formData[i].name)
{
case "educationSchool":
{
if($.trim(formData[i].value) == "")
{
flag = false;
$("#educationSchool").poshytip("show");
}
else
{
$("#educationSchool").poshytip("hide");
}
break;
}
case "educationMajor":
{
if($.trim(formData[i].value) == "")
{
flag = false;
$("#educationMajor").poshytip("show");
}
else
{
$("#educationMajor").poshytip("hide");
}
break;
}
case "educationTime":
{
if($.trim(formData[i].value) == "")
{
flag = false;
$("#educationTime").prev().find("input").poshytip("show");
}
else
{
$("#educationTime").prev().find("input").poshytip("hide");
}
break;
}
}
}
if(!flag)
status = true;
return flag;
}
return false;
}
后台springMVC代码
/**
* 添加or修改 add
* author chensg
* 2016.03.15
*/
@RequestMapping(value = "/addorset", method = RequestMethod.POST)
public @ResponseBody RestResult addOrSetStaff(StaffEducation staffEducation,@RequestParam(value = "img" ,required=false) MultipartFile file,HttpServletRequest request, Model model) {
if(null == staffEducation.getEducationIsHigh()) //如果没有勾选最高学历,后台不会接受到参数
staffEducation.setEducationIsHigh(0);
RestResult result = null;
String educationId ;
//没有educationId则是新增
if(null==staffEducation.getEducationId() || "".equals(staffEducation.getEducationId())){
result = client.addStaffEducation(staffEducation);
//获得新增后的唯一uuid
educationId = result.getResults().get("educationId").toString();
}else{
//修改
result = client.setStaffEducation(staffEducation);
educationId = staffEducation.getEducationId();
}
if( null != file)
{
//图片路径用唯一的educationId(uuid)
String path = request.getSession().getServletContext().getRealPath("upload/"+educationId);
String fileName ="educationPicture."+ file.getOriginalFilename().split("\\.")[1];
File targetFile = new File(path, fileName);
if(!targetFile.exists()){
targetFile.mkdirs();
}
//保存图片路径
try {
file.transferTo(targetFile);
staffEducation = new StaffEducation();
staffEducation.setEducationId(educationId);
staffEducation.setEducationUrl(request.getContextPath()+"/upload/"+educationId+"/"+fileName);
return client.setStaffEducation(staffEducation);
} catch (Exception e) {
e.printStackTrace();
}
}
return result;
}
分享到:
相关推荐
资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。
资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。VUE框架构建前端交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。
1、文件内容:rsyslog-kafka-8.24.0-57.el7_9.3.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/rsyslog-kafka-8.24.0-57.el7_9.3.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装
资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。
1、文件内容:qt5-qtcanvas3d-5.9.7-1.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/qt5-qtcanvas3d-5.9.7-1.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装
KVM 虚拟化win10PE 带virtio 驱动
使用python和js逆向破解的某药城商品价格密文参数的源代码,具体步骤可查看文章:https://blog.csdn.net/weixin_42108731/article/details/1454
资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。
基于Xilinx K7 325T FPGA实现千兆网UDP协议透传通信模块说明,基于xilinx k7 325t实现的千兆网udp协议,只需要设置好IP,端口,就可以直接给数据,基本等同于透传,可以不用管底层协议。 可以 # FPGA 实现udp模块说明 ## udp_protocol_top gig_ethernet_pcs_pma有脚本生成,任何版本vivado都可以支持,注释里面有对重要信号的说明,默认是1000M,100M需要改内部信号,PHY芯片是88E1512,SGMII接口。 FPGA和上位机IP,端口都要设置好才能收到数据,注意在同一个网段 ## 接收数据 udp_protocol_top.rx_udp_payload_axis_tvalid拉高的时候就代表udp_protocol_top.rx_udp_payload_axis_tdata有效,udp_protocol_top.rx_udp_payload_axis_tready默认给1可以一直收数据 ## 发送数据 tx_udp_payload_axis_tready=1的时候拉高tx_udp_payload_axi
ConversorVCLUniGUI.7z
资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。
西门子博图WinCC V15自动化系统项目实战:多服务器客户端下的PID DCS闭环控制及参数调整实战指南,西门子博图WinCC V 15大型自动化系统项目,包含多台服务器客户端项目,系统采用安全1516F -3PN DP 外挂多台精智面板,1200PLC ET200SP 变频器 对整个工艺过程PID DCS 闭环过程控制,如何调整温度压力流量液位等参数,实用工程项目案例 ,关键词:西门子博图WinCC V 15;大型自动化系统;多台服务器客户端;安全1516F -3PN DP;精智面板;1200PLC ET200SP;变频器;PID DCS闭环过程控制;调整温度;调整压力;调整流量;调整液位;实用工程项目案例。,"西门子博图WinCC V15大型项目:多服务器客户端的PID DCS闭环控制与实用参数调整"
1、文件内容:rarian-devel-0.8.1-11.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/rarian-devel-0.8.1-11.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装
Proteus电子电路仿真
The dataset includes the following eight classes:Rice Hispa、Neck Blast、Narrow Brown Leaf Spot、Leaf Scald、Leaf Blast、Healthy Rice Leaf、Brown Spot、Bacterial Leaf Blight。约7000张数据
资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。
资源说明: 1:csdn平台资源详情页的文档预览若发现'异常',属平台多文档切片混合解析和叠加展示风格,请放心使用。 2:32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署,保姆级图文详解),旨在为更多的人甚至零基础的人也能运行、使用和学习。 3:配套毕业论文,万字长文,word文档,支持二次编辑。 4:范例参考答辩ppt,pptx格式,支持二次编辑。 5:工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6:资源项目源码均已通过严格测试验证,保证能够正常运行,本项目仅用作交流学习参考,请切勿用于商业用途。 7:项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通。 内容概要: 本系统基于B/S网络结构,在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据,可靠性强。 能学到什么: 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。
微电网主从控制孤岛与并网平滑切换策略分析:涵盖VF控制、PQ控制及下垂有功无功环的研究与控制设计,涵盖Matlab模型与实际文档控制应用实践,微电网(两台)主从控制孤岛-并网平滑切的分析。 分析了: 1.孤岛下VF控制 2.并网下PQ控制 3.孤岛下主从控制 4.孤岛到并网的平滑切控制 5.除模型外还对分布式发电与主动配电网一些常见问题做了归纳。 包括:matlab2016模型和自己编写文档 控制回路包括:下垂控制有功环无功环,锁相,电压电流双闭环,SVPWM,并网判断,相位同步等。 ,核心关键词:微电网;主从控制;孤岛运行;并网运行;平滑切换控制;VF控制;PQ控制;下垂控制;有功环;无功环;锁相环;电压电流双闭环;SVPWM;并网判断;相位同步;Matlab2016模型;文档编写。,微电网主从控制策略:孤岛与并网平滑切换技术分析
1、文件内容:qt5-qtscript-5.9.7-1.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/qt5-qtscript-5.9.7-1.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装
1、文件内容:qpid-proton-cpp-docs-0.14.0-2.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/qpid-proton-cpp-docs-0.14.0-2.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装