文档章节

ajaxForm的应用

小农人
 小农人
发布于 2016/03/02 09:06
字数 702
阅读 11
收藏 0

 

ajaxForm的应用



背景:

在From中需要上传文件,并且能够在From提交成功后处理返回的值。就需要使用ajaxForm的方式来提交。

使用html中form的提交方式,无论是使用页面的submit按钮还是使用jquery的$('#myform').submit()方式,来提交form,都没法处理提交后返回来的数据。

要使用回调函数处理返回来的数据,就要使用ajax来提交form。

但是ajax提交from的时候没法传送文件。

所以使用ajaxForm就可以完美解决这个问题:既可以上传文件到后台,也可以写回调函数来处理返回来的数据。


使用ajaxForm需要引入文件:jquery.form.js

官网 http://jquery.malsup.com/form/ ,其实是个基于jquery的From plugin,需要jquery1.5 or later。


详细的用法可以参见官网上的说明。

下面讲一个我使用的方式,当作例子:

1.前端代码:

[html] view plain copy print?

  1. <span style="font-size:14px;"><form id="fm_importSales" method="post" enctype="multipart/form-data">  

  2.                 <table  class="fm-table fm-table-td">  

  3.                     <tr>  

  4.                         <th>选择文件:</th>  

  5.                         <td>  

  6.                             <!-- accept属性限定xlsx格式文件,但是该属性只在FF和chrome生效,IE10以下不生效 -->  

  7.                             <input id="excelfile" name="filename" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="COLOR: RED;font-size: 15px;">  

  8.                         </td>  

  9.                     </tr>  

  10.                     <tr>  

  11.                         <td>  

  12.                         <input style="width: 100px;" value="导入Excel" type="submit"/>  

  13.                         <input style="width: 100px;" value="取消" type="button" onclick="javascript:$('#dlg_importSales').dialog('close')"/>  

  14.                         </td>  

  15.                     </tr>  

  16.                     <input type="hidden" id="importOrgId" name="orgId">  

  17.                     <input type="hidden" id="importChlInfoId" name="channelInfoId">  

  18.                 </table>  

  19.             </form></span>  


前端定义了一个form,form中包含一个table。form包含一个submit按钮。

2.js代码

(1)在document.ready()中注册form组件。

[javascript] view plain copy print?

  1. <span style="font-size:14px;">$(document).ready(function() {    

  2.     // bind 'myForm' and provide a simple callback function     

  3.     var options = {  

  4.             url: baseContextPath+'/channelOrganization/importSales',  

  5.             //定义返回JSON数据,还包括xml和script格式  

  6.             dataType:'json',  

  7.             beforeSerialize: doBeforeSerialize,  

  8.             beforeSubmit: doBeforeSubmit,  

  9.             //beforeSend: handelImport,  

  10.             success: handelResonse  

  11.     }  

  12.     $('#fm_importSales').ajaxForm(options);  

  13.       

  14.     $('#fm_importSales').submit(function() {  

  15.         // 提交表单  

  16.         $(this).ajaxSubmit();  

  17.         // return false to prevent normal browser submit and page navigation  

  18.         return false;  

  19.     });  

  20. });  

  21. </span>  

(2)写表单提交三个阶段的函数:

[javascript] view plain copy print?

  1. function handelResonse(result){  

  2.     //提交成功后调用  

  3.    if (result.success){  

  4.        $('#dlg_importSales').dialog('close');  

  5.        $.messager.show({  

  6.             title : '提示',  

  7.             msg : result.msg,  

  8.             show : 'show',      // fade是渐隐,另外两种是“show”和“slide”  

  9.             timeout : 3000          // 持续时间  

  10.         });  

  11.    } else {  

  12.        $.messager.show({  

  13.             title : '错误提示',  

  14.             msg : result.msg,  

  15.             show : 'show',      // fade是渐隐,另外两种是“show”和“slide”  

  16.             timeout : 3000          // 持续时间  

  17.         });  

  18.    }  

  19.    // 判断是否要导出txt  

  20.    if (result.exportTxt) {  

  21.        getTxt();  

  22.    }  

  23. }  

  24.   

  25. function getTxt(){  

  26.     var url_getTxt = baseContextPath+'/channelOrganization/importSales';  

  27.     //window.open(url_getTxt);   //会打开新选项卡,可能被浏览器拦截,弃用  

  28.     window.location.href = url_getTxt;  

  29. }  

  30. function doBeforeSerialize(){  

  31.     //alert('doBeforeSerialize');  

  32.     // return false to cancel submit  

  33.       

  34.     var excelfile = $('#excelfile').val();  

  35.     if("" == excelfile || null == excelfile) {  

  36.         alert('请选择文件。');  

  37.         return false;  

  38.     }  

  39.       

  40.     var p = excelfile.endWith(".xlsx");  

  41.     if (!excelfile.endWith(".xlsx")) {  

  42.         alert('文件格式不对!请选择.xlsx格式的文件。');  

  43.         return false;  

  44.     }  

  45.       

  46.     var node = $('#channelOrganization').tree('getSelected');  

  47.     if (null == node) {  

  48.         alert('请先选中要添加销售点的组织结构。');  

  49.         return false;  

  50.     }  

  51.     var channelId = $("#channelList").combobox('getValue');  

  52.     $('#importOrgId').val(node.id);  

  53.     $('#importChlInfoId').val(channelId);  

  54.     return true;  

  55. }  

  56. function doBeforeSubmit(){  

  57.     //alert("doBeforeSubmit");  

  58. }  

  59.   

  60. function handelImport() {  

  61.     //alert('handelImport');  

  62. }  



本文转载自:

小农人
粉丝 0
博文 4
码字总数 2279
作品 0
海淀
私信 提问
JQeury form插件的ajaxForm方法和ajaxSubmit方法的区别

/** * ajaxForm() provides a mechanism for fully automating form submission. * * The advantages of using this method instead of ajaxSubmit() are: * * 1: This method will include ......

大_于
2014/06/17
3.8K
0
JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别

Query中的AjaxForm和AjaxSubmit使用差不多功能也差不多。很容易误解。 按照作者的解释: AjaxForm ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。...

李长春
2011/11/29
1K
0
Jquery表单插件ajaxForm用法详解

插件主要的方法: ajaxForm ajaxSubmit formToArray formSerialize fieldSerialize fieldValue clearForm clearFields resetForm 示例代码: // wait for the DOM to be loaded $(document)......

Adam-Lee
2011/12/27
13.6K
2
jquery ui与jquery form两个插件的冲突问题

我在一个jsp页面同时应用的jquery ui和jquery form插件并在javascript中调用了其中的tabs()方法和ajaxForm(),但在谷歌上调试时总是报出Uncaught TypeError: Object # has no method 'tab...

小小邱
2012/07/29
3.2K
1
jquery.form的解绑问题

我想在ajaxform成功后解绑ajaxform,再次提交表单。但$("form").submit();总是报错。。为什么??

走位风骚闪着腰
2014/02/10
528
2

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
4
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
8
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部