【mvc】——jquery.fom.js的核心方法ajaxsubmit实例

【前言】

    最近小编在做积分系统的时候遇到了一个关于表单提交向后台传送数据，后台接收了数据，但是页面会产生相应的跳转，所以在想有没有什么用ajax的方式提交表单，这样可以实现部分的刷新，当然最终实现了，分享给大家！

【内容】

前提条件：引进jquery-from.js文件

mvc中V层的代码:

<script src="~/Content/JS/jquery-form.js"></script>
@*自定义的代码*@
<script src="~/Content/JS/UserMangement/UserMange.js"></script>
@*弹出导入Excel框*@
   <div id="importDiv">  
      <form id="testform" enctype="multipart/form-data" style="text-align:center;" > 
           <div style="margin-bottom: 50px"></div>
            <div style="margin-bottom: 20px">
                <span class="tip">提示：导入前请先下载EXCEL模板</span><a class="btn-lit" href="../../ExcelFile/积分用户导入模板.xlsx">
                    <span>点击下载EXCEL模板</span></a>
            </div>
            <div style="margin-bottom: 20px">
                <input id="FileUpload" class="easyui-filebox" name="files" data-options="prompt:'选择文件....'" style="width:60%" />
            </div>
            <div style="text-align:center;clear:both;margin:10px,20px">
             <a id="btnAdd" class="easyui-linkbutton" data-options="iconCls:'icon-add'">上传</a>
            <a id="btncancel" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:closeImportClick" href="javascript:void(0)">关闭</a></div>     
   </form>
  </div>

UserMangagement.js的代码：

$(function(){
    $('#btnAdd').bind('click', function importExcel() {
        var file = $('#FileUpload').filebox('getValue');
        //判断文件上传是否为空
        if (file == null || file == "") {
            $.messager.alert('系统提示', '请选择将要上传的文件!');
            return;
        }
        //分割文件的类型
        var file_typename = file.substring(file.lastIndexOf('.'), file.length);
        if (file_typename == '.xlsx' || file_typename == 'xls') {
            var options = {
                method: 'POST',
                url: '/UserManagement/PostExcel',
                data: file,
                success: function (data) {
                    if (data == 'True') {
                        $.messager.show({
                            title: '提示',
                            msg: '用户批量导入成功',
                            showType: 'slide'
                        })
                        document.getElementById("FileUpload").value = null;
                        $('#importDiv').dialog('close');
                        $('#dg').datagrid("unselectAll");
                        $('#dg').datagrid('reload');
                    } else {
                        $.messager.alert('警告', '导入异常，请检查是否正确使用模板！')
                    }
                }
            }
            $('#testform').ajaxSubmit(options);
        } else {
            $.messager.alert('提示', '请选择正确的文件类型')
        }
    })
})

control的层接收数据:

  HttpPostedFileBase file=Request.Files["files"];

延伸：

jquery的form.js插件的核心方法不只有ajaxsubmit，还有ajaxfrom方法。另外插件还包括了另外的一些方法： formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()，都是对于采集表单的数据的操作！具体大家可以见：

jQuery插件 -- Form表单插件jquery.form.js

【总结】

  越来越发现jquery的强大封装的魅力，同时在感受它们魅力的同时也发现自己对于jquery的了解是皮毛，还需要系统的学习！希望对正在浏览本文的你有帮助！