Easyui Form表单提交

最新推荐文章于 2021-08-05 20:31:24 发布

无盐海

最新推荐文章于 2021-08-05 20:31:24 发布

阅读量7k

点赞数

分类专栏： EasyUI AJAX | JSON

本文链接：https://blog.csdn.net/Fanbin168/article/details/49963417

版权

AJAX | JSON 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

EasyUI

11 篇文章 0 订阅

订阅专栏

<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>