Easyui Form表单提交

原创 2015年11月21日 12:09:44

1

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index2</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="~/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link href="~/jquery-easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/jquery-easyui/themes/icon.css" rel="stylesheet" />
</head>
<body>
    <form id="box" class="easyui-form" method="post"action="123.html">
        <p>用户名:<input type="text" name="userName" id="userName" /></p>
        <p>密  码:<input type="password" name="userPassword" id="userPassword" /></p>
        <p><input type="submit" id="btnSubmit" value="提交"/></p>
    </form>
    <button id="btn">abc</button>
</body>
</html>
<script type="text/javascript">
    $(function () {
        //如果写了这个form 点击提交的时候就不会提交到123.html了。而是提交到这个异步里的url方法中去了
        //$("#box").form({
        //    url: '/Test/CheckLogin', //异步请求

        //    //在提交之前触发,返回false可以终止提交。(param是一个额外数据。)
        //    onSubmit: function (param) {
        //        param.p1 = "123";  //当点击提交的时候,它就会以key 为p1值为123 的方式将数据提交到服务器(当前其他的数据还是照样会提交,只是这个数据是额外的数据而已)
        //        param.p2 = "456";

        //        //return false; //这里可以做表单的验证,如果验证失败,就return false 来终止表单提交
        //    },
        //    success: function (data) {
        //        if (data == 'True') {

        //            //    $.messager.alert('消息','保存成功!');   
        //            //    $('#tab_line').datagrid('reload');   
        //            //    $("#fm_line").form("clear");   
        //            //    top.location.href = "main/main.html"; //转主页面 
        //            //}else{   
        //            //    $.messager.alert('消息','保存失败!');   
        //            //}   

        //        }
        //    }
        //})



        //自动提交方法(刷新一下就会自动将表单提交了,其实我们就当他作为一种提交方式而已)(写法和上面的基本上一行,只是在大括号前面加一个‘submit’)
        //$("#box").form('submit',{
        //    url: '/Test/CheckLogin', //异步请求

        //    //在提交之前触发,返回false可以终止提交。(param是一个额外数据。我也没搞明白怎么用的)
        //    onSubmit: function (param) {
        //        //return false; //这里可以做表单的验证,如果验证失败,就return false 来终止表单提交
        //    },
        //    success: function (data) {

        //        alert(data);
        //    }
        //})

        

        //------------现在来看看方法


        //-----还有一种方式(即服务器返回一组json数据 如服务器返回{"userName":"蜡笔小新"})
        $("#box").form("load", '/Test/LoadData'); //这样效果也是一样的


        //--------Load方法(它是给表单填充数据用的)
        $("#box").form('load', {
            userName: "蜡笔小新",  //这样就给表单赋值了
            userPassword: "123456",

            onBeforeLoad: function () {
                alert("Load之前触发(即数据加载之前触发)")
            },

            onLoadSuccess: function (data) {
                alert("数据加载成功" + data.userName);
            }
        })
    })
</script>

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

EasyUI提交表单

使用EasyUI提交表单以及对表单数据的处理 1:创建EasyUI页面 2:创建一个HTML的Form表单控件,具体代码如下:     特别注意,这个form需要有ID,以及method...

jQuery EasyUI详解-EasyUI表单 文本框 按钮

本篇重点介绍EasyUI框架下的表单和表单元素使用。在开始使用EasyUI之前,要认清楚一个原则,因为EasyUI是封装的CSS及JS库,所以在修改EasyUI组件的样式和功能时,最好是采用EasyU...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

jQuery EasyUI之Form表单提交

Form 表单   用法 1.   id="ff" method="post">   2.      ... ...

jQuery EasyUI使用教程使用Ajax提交表单

本教程主要展示如何使用easyui提交表单。我们创建一个带有name、email和phone字段的表单,通过使用easyui表单插件来将表单更改为ajax表单。表单提交所有的字段到后台服务器,服务器处...

EasyUI之表单Form

1、实例背景     EasyUI常用的Form表单,利用输入框直接提交值;清空按钮,将填写有误的数据进行清空2、实例源码 EasyUI之表单Form ...

jQuery easyui form不能提交

最近在做一个新项目,项目中用到了jQuery easyui,这个前台UI框架真的是很好用。有兴趣的可以参考官方网站,里面的文档中有详细的介绍,直接拷贝文档中的代码就可以使用了。 jQuery eas...

easyui之form表单提交

$('#editForm').form('submit', {     url : "${path}/bu/addTApplication",     contentType : &q...

easyUI 通过ajax的方式提交Form

@author YHC 这个教程向你展示使用easyui提交一个form,我们创建一个示例form和name, email 和phone 字段.通过使用form 插件我们改变form为ajax ...

EasyUI常用组件(基础)

EasyUI是一种第三方组织开发的,开源的,功能强大的,基于jquery的插件库。 主要可以用于web的后台前端。jQuery EasyUI 提供易于使用的组件,它使 Web 开发人员能快速地在流行的...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)