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 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 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获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
深入PHP数据加密详解
2013/06/18 PHP
php常用Stream函数集介绍
2013/06/24 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python实现人机猜拳小游戏
2020/02/03 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
农村党支部先进事迹
2014/01/14 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
英语辞职信怎么写
2015/02/28 职场文书
勇敢的心观后感
2015/06/09 职场文书
大学生活感想
2015/08/10 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang