[asp.net] 利用ajax与easyui验证并提交表单

最新推荐文章于 2021-08-05 20:59:01 发布

CallMeJacky

最新推荐文章于 2021-08-05 20:59:01 发布

阅读量600

点赞数

分类专栏： ASP.NET网站开发

本文链接：https://blog.csdn.net/zyxhangiian123456789/article/details/80878311

版权

ASP.NET网站开发专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="/Scripts/loading.js" type="text/javascript"></script>
    <link href="/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/EasyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
    <script src="/EasyUI/jquery.min.js" type="text/javascript"></script>
    <script src="/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/distinguishBrowser.js" type="text/javascript"></script>
</head>
<body>
    <form id="fm" method="Post" οnsubmit="return validateForm();">
    <div style="margin-bottom: 20px; width: 300px;">
        <input id="uid" class="easyui-textbox" name="Id" type="text" style="width: 100%"
            data-options="label:'用户编号:',required:true">
    </div>
    <div style="margin-bottom: 20px; width: 300px;">
        <input id="uname" class="easyui-textbox" name="Name" style="width: 100%" data-options="label:'用户名:',required:true">
    </div>
    <div style="margin-bottom: 20px; width: 300px;">
        <input id="upassword" class="easyui-textbox" name="Password" style="width: 100%"
            data-options="label:'密码:',required:true">
    </div>
    <div style="margin-bottom: 20px; width: 300px;">
        <input id="email" class="easyui-textbox" name="Email" style="width: 100%" data-options="label:'电子邮箱:',required:true,validType:'email'">
    </div>
    <div style="margin-bottom: 20px; width: 300px;">
        <input id="phonenumber" class="easyui-textbox" name="Phonenumber" style="width: 100%"
            data-options="label:'电话号码:',required:true">
    </div>
    <div style="margin-bottom: 20px; width: 300px;">
        <input id="cc1" class="easyui-combobox" name="Role" label="角色" style="width: 100%"
            data-options="valueField:'id',textField:'text',url:'/Role/RoleHandler.ashx?action=GetAll',required:true">
    </div>
    <div style="margin-bottom: 20px; width: 300px;">
        <input id="cc2" class="easyui-combobox" name="JT" label="所属集团" style="width: 100%"
            data-options="valueField: 'id', textField: 'text', url: '/JT/JTHandler.ashx?action=GetAll',
                    onSelect: function(rec){
                        var url = '/GC/GCHandler.ashx?action=GetGC&jt=' + rec.id;
                        $('#cc3').combobox('reload', url);
                    },required:true" />
    </div>
    <div style="margin-bottom: 20px; width: 300px;">
        <input id="cc3" class="easyui-combobox" name="GC" label="所属工厂" style="width: 100%"
            data-options="valueField:'id',textField:'text', url: '/GC/GCHandler.ashx?action=GetAll',required:true">
    </div>
    </form>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconcls="icon-ok" οnclick="saveUser()">保存</a>
        <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">
            取消</a>
    </div>
    <script type="text/javascript">
        function saveUser() {
            if (getBrowserType() == "Chrome") {
                //ajax提交表单验证方式
                var validate = $("#fm").form('validate');
                if (!validate) {
                    $.messager.alert("提示", '请正确填写表单！', "", function () {
                        $("#fm").find(".validatebox-invalid:first").focus();
                    });
                    return false;
                }
                $.ajax({
                    url: '/User/UserHandler.ashx?action=Add',
                    type: "Post",
                    data: $("#fm").serialize(), //将表单序列化
                    success: function (data) {
                        data = eval('(' + data + ')');      //将一个json字符串解析成js对象
                        //ajax方式直接将后台的json字符串转换为json对象，即这里的data已经是json对象，不需要转换
                        $.messager.alert("提示", data.Message, 'info'); //显示后台信息
                        if (data.Success) {
                            location.href = '/User/Show.html';
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    }

                });
            } else {
                $('#fm').form('submit', {
                    url: '/User/UserHandler.ashx?action=Add',
                    onSubmit: function () {
                        //验证表单是否合法
                        return $(this).form('validate');
                    },
                    success: function (data) {
                        data = eval('(' + data + ')');      //将一个json字符串解析成js对象
                        $.messager.alert("操作提示", data.Message, 'info'); //提示后台错误信息
                        if (data.Success) {
                            location.href = '/User/Show.html';
                        }
                    }
                });
            }
        }
    </script>
</body>
</html>

CallMeJacky

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[asp.net] 利用ajax与easyui验证并提交表单

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta http-equiv="pragma" content="no-cache" /&gt; &lt;meta http-equiv="Content-Type&quo
复制链接

扫一扫