异步提交表单插件jquery.form.min.js的使用实例
因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息。
尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件,查找资料后得知:
.serialize()序列化表单,提交按钮的值不会被序列化。另外,如果想要一个表单元素的值被序列化成字符串,这个元素必须含有 name
属性。此外,复选框(checkbox)和单选按钮(radio)(input
类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。另外,文件选择元素的数据也不会被序列化。
后面使用了Jquery.form插件来完成了该功能。
前台:
1.导入jquery.min.js和jquery.form.min.js
<scripttype="text/javascript"src="${ctxStatic}/js/jquery-1.7.2.js"></script> <scripttype="text/javascript"src="${ctxStatic}/js/jquery.form.min.js"></script>
2.设置按钮和隐藏表单
<aclass="btn btn-small btn-success"onclick="javascript:inportAdvertiserList();">导入</a><divstyle="display: none"><formclass="form-inline"id="uploadexcel"name="uploadexcel"action=""method="post"style="padding-bottom: 10px;"enctype="multipart/form-data"><inputtype="file"name="excelFile"id="excelFile"onchange="javascript:submitexcelFile()"></form></div>
这里按钮是超链接改变样式来实现按钮,普通按钮也可以。div默认位隐藏
3.对应的js函数
<scripttype="text/javascript">functioninportAdvertiserList(){$("#excelFile").click();}functionsubmitexcelFile(){$("#uploadexcel").ajaxSubmit({url:"${ctx}/advertiser/inportAdvertiserList",type:"post",enctype:'multipart/form-data',//iframe: true, dataType:'json',success:function(data){//var msg = eval(data); alert(data.errMsg);window.location.reload();},error:function(data){//var msg = eval(data); alert("出错");//msg.errCode }})}</script>
这里注意Id选择器和input的name(后台取值会用到),url位后台地址
后台:
@RequestMapping(value = {"inportAdvertiserList"})public@ResponseBodyErrorMsg inportAdvertiserList(MultipartFile excelFile, ModelAndView model,HttpServletRequest request, HttpServletResponse response){String[] tableHander= {"平台", "账户ID", "账户名称", "是否ROI账户", "客户名称", "销售人员"};String[] fileNames= {"platformName", "advertiser_id", "corporation_name", "roi", "customerName", "solder.name"};List<Object> list = null;
list = ExcelUtil.readExcel(excelFile, Advertiser.class, tableHander, fileNames);
}
后台是ssm构建的,
@RequestMapping(value = {"inportAdvertiserList"})用来设置请求url,
@ResponseBody用来标记返回指,可以将返回值转换成json数据返回(需要导入相关包)。后台可以MultipartFile excelFile来取到前台input传过来的file 这次项目中是需要取到前台传过来的excel并解析其中的数据,将其转换为对象存入数据库,部分数据公司相关,后面就不写了。
转载于:https://www.cnblogs.com/LeoBoy/p/5831302.html
异步提交表单插件jquery.form.min.js的使用实例相关推荐
- Form表单插件jquery.form.js
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubm ...
- jQuery插件 -- Form表单插件jquery.form.js
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...
- servlet html js提交表单,使用jquery.form.js实现form表单无刷新提交简单示例
直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代码吧,代码比较简单! Servlet代码: package com.pro ...
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js 1 <scrip ...
- jquery 上传图片 java_jquery 异步提交表单 上传图片小例子
这次做ecshop项目用到了一些小东西,这里我就把在项目中用到的一个异步上传多个产品图片的小东西,不是多好,但是是我自己查资料搞出来的.放这里,给自己和大家一个参考,欢迎丢砖!(jquery+spri ...
- 如何异步提交表单 如何异步跨域提交表单
1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 代码: 使用 jQuery 异步提交表单 <html xmlns="http ...
- HTML 提交表单,JQuery接收内容
HTML 提交表单,JQuery接收内容,示例如下: <!DOCTYPE html> <html lang="en"> <head><me ...
- Form表单序列化Json插件-jquery.serializejson.min.js
Form表单参数序列化成Json对象: 1. 使用serializeJsonObject 2. jquery.serializejson.min.js 1. 使用serializeJsonObject ...
- MVC之AJAX异步提交表单
第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> ...
最新文章
- (卓今京)Java 基础
- .net中使用反射的简单例子
- mdkstc系列器件支持包下载_WPS Office 2019 For Linux(2020/10/21)更新-支持PDF编辑
- Win7下安装配置OpenCV2.3+Visual Studio 2008
- 活动目录系列之二:单域环境的实现(单站点)
- php 查询出来的字段名全是小写或者大写
- PINN物理驱动的深度学习方法入门到详解
- 铁甲小宝像车轮的是什么机器人_铁甲小宝里的机器人都叫什么名字啊
- 2023中南大学计算机考研信息汇总
- win7命令更新补丁
- Bootstrap栅格系统 xs sm md lg xl
- 【子集/组合/全排列】C语言框架
- 如何采集人类高质量脑电波?| 脑电设备推荐
- 黑鹰的学习网站--感兴趣的可以去看看
- Mac安装eDEX-UI以及后续Python环境配置
- js中的var是什么意思
- java argument是什么_第2期:argument、parameter以及option有什么区别?
- 十大常用电子元器件背后的门道
- 阿里云域名购买、认证、解析 腾讯企业邮箱注册、解析
- 数学建模——存贮模型