jquery插件EasyUI中form表单提交实例分享


Posted in Javascript onJanuary 11, 2016

之前用AJax给Controller传递参数,然后再调用服务端的方法对数据库进行更改,今天碰到一个新的方法,就是表单的提交,这样可以省去AJax传参。

当表单提交后,我们可以获取表单上控件中的值,然后再调用服务端的方法对数据库进行更改。下面的一张截图是具体的业务需求。

jquery插件EasyUI中form表单提交实例分享

一、要实现的功能:从上面这个表单中,获取控件中的值,然后传递给后台。下面是表单代码。
二、表单代码

<div id="Editwin" class="easyui-window" title="编辑班级信息" style="width: 400px; height: auto;top:105px" data-options="closed:true,collapsible:false,minimizable:false,maximizable:false"> 
  <div style="margin-top: 30px; margin-bottom: 30px; margin-left: 70px;"> 
    <form id="EditForm" method="post"> 
      <table> 
        <tr> 
          <td>班级名称:</td> 
          <td> 
             <input class="easyui-validatebox" type="text" id="EditClassName" name="ClassName" data-options="required:true,validType:['maxLength[20]']"/> 
          </td> 
        </tr> 
        <tr> 
          <td> 
            <input style="display:none" class="easyui-textbox" type="text" id="EditClassID" name="ClassID" data-options="required:true"/> 
          </td> 
        </tr> 
        <tr> 
          <td>所属机构:</td> 
          <td> 
            <input id="EditOrganizationID" class="easyui-combobox" name="OrganizationName1" data-options="required:true"/> 
        </tr>      
        <tr> 
          <td>年级:</td> 
          <td> 
            <input id="EditGradeID" class="easyui-combobox" name="GradeName" data-options="required:true"/>  
        </tr> 
 
        <tr> 
          <td>备注:</td> 
          <td> 
            <textarea class="easyui-validatebox" id="NoteId" name="Note" validType:['maxLength[50]></textarea> 
        </tr> 
        </table> 
 
      <div style="margin-top: 20px;"> 
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="margin-left: 10px;" onclick="EditsubmitForm()">确定</a> 
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" style="margin-left: 60px;" onclick="EditclearForm()">取消</a> 
      </div> 
    </form> 
  </div> 
</div>

三、表单提交代码 

function EditsubmitForm() { 
      $('#EditForm').form('submit', { 
        url: "/BasicClass/ModifyClassInfo", 
        onSubmit: function () {        //表单提交前的回调函数 
          var isValid = $(this).form('validate');//验证表单中的一些控件的值是否填写正确,比如某些文本框中的内容必须是数字 
          if (!isValid) { 
          } 
          return isValid; // 如果验证不通过,返回false终止表单提交 
        }, 
        success: function (data) {  //表单提交成功后的回调函数,里面参数data是我们调用/BasicClass/ModifyClassInfo方法的返回值。 
          if (data > 0) { 
            $.messager.show({ 
              title: '提示消息', 
              msg: '提交成功', 
              showType: 'show', 
              timeout: 1000, 
              style: { 
                right: '', 
                bottom: '' 
              } 
            }); 
            $('#dg').datagrid('reload');  // 重新载入当前页面数据  
            $('#Editwin').window('close'); //关闭窗口 
          } 
          else { 
            $.messager.alert('提示信息', '提交失败,请联系管理员!', 'warning'); 
        } 
        } 
      }); 
}

四、后台Controller获得表单中的数据

//获得要添加的班级的名称 
       string ClassName = Request.Form["ClassName"]; 
       //获得班级ID 
       Guid ClassID = new Guid(Request.Params["ClassID"]); 
       string ClassNote = Request.Form["Note"];

初学乍练,感觉比AJax传参好用多了,因为AJax穿参时需要将各个参数的名字全部写进去,而表单提交时,默认将表单中的内容全部传送过去,这样表单中只要有什么数据我们就可以在后台获取什么数据,当然了,这些数据是提前绑定好的,或者是我们之前填写好的。

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
javascript json2 使用方法
Mar 16 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
VueJS全面解析
Nov 10 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 #Javascript
提升jQuery的性能需要做好七件事
Jan 11 #Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 #Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 #Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 #Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 #Javascript
JavaScript基础知识及常用方法总结
Jan 10 #Javascript
You might like
PHP输出缓存ob系列函数详解
2014/03/11 PHP
非常实用的php验证码类
2016/05/15 PHP
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python中is与==判断的区别
2017/03/28 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
环境科学专业个人求职信
2013/09/26 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
大学自主招生推荐信
2014/05/10 职场文书
食品流通安全承诺书
2014/05/22 职场文书
企业环保标语
2014/06/10 职场文书
个人求职自荐信范文
2014/06/20 职场文书
人才市场接收函
2015/01/30 职场文书
环境建议书
2015/02/04 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
开网店计划分析
2019/07/30 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技