表单Submit之后获得后台响应

最新推荐文章于 2023-10-17 17:27:57 发布

原创最新推荐文章于 2023-10-17 17:27:57 发布 · 2.7k 阅读

CC 4.0 BY-SA版权

本文介绍了两种在页面表单提交后与后台进行交互的方法。第一种是通过Validform插件，在页面初始化时直接绑定，实现表单验证和Ajax提交，回调处理后台返回的数据。第二种方法是直接在submit事件上绑定处理方式，异步登录，进行参数验证，并展示相应的提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方式:页面初始化时直接绑定Validform
$(function(){
        //部门编辑表单校验
        $(".main_content form:first").Validform({
                        tiptype:3,
                        ajaxPost:true,
                        beforeSubmit:function(curform){
                                return true;
                        },
                        callback:function(data){        //alert("【"+JSON.stringify(data)+"】");
                                if(data.node.result == true){
                                        var beanId = $("#info").find("input[name='formBean.beanId']").val();
                                        $("#info").empty();
                                        if(beanId && $.trim(beanId)!=""){
                                                if(typeof window.refreshNode == "function"){
                                                        //刷新编辑后的节点
                                                        window.refreshNode(data.node);
                                                }
                                        }else{
                                                if(typeof window.addNode == "function"){
                                                        //将新节点挂在树上
                                                        window.addNode(data.node);
                                                }
                                        }
                                }else if(data.node.result == false){
                                        alert(data.node.message);
                                }else{
                                        alert("失败了！");
                                }
                                $("#Validform_msg").hide();
                        }
                }).addRule(
                        [
                         {ele:"[name='formBean.deptName']", datatype:"s1-30",
                                nullmsg:"1-30个汉字、字母、数字、下划线！", errormsg:"1-30个汉字、字母、数字、下划线！"},
                         {ele:"[name='formBean.orderNo']", datatype:"n1-2", nullmsg:"0-99的数字！", errormsg:"0-99的数字！"},
                         {ele:"[name='formBean.manager']", datatype:"/^[\u2E80-\u9FFF]{2,5}$/", nullmsg:"2-5个汉字！", errormsg:"2-5个汉字！"},
                         {ele:"[name='formBean.managerPhone']", datatype:"/^[0-9 ()+-]{1,30}$/",
                                nullmsg:"1-30个数字、+、-、(、)、空格！", errormsg:"1-30个数字、+、-、(、)、空格！"},
                         {ele:"[name='formBean.managerEmail']", datatype:"e,*0-30",
                                nullmsg:"e-mail，1-30个字符！", errormsg:"请检查e-mail格式，且长度不超过30个字符！"},
                         {ele:"[name='formBean.descr']", datatype:"*1-200",
                                nullmsg:"不超过200个字符！", errormsg:"不超过200个字符！", ignore:"ignore"}
                         ]
        );
});

第二种方式:submit方法绑定处理方式

$("form").submit(function(){
            //防止重复点击，锁定登陆按钮
            $(".butn").attr("disabled", "disabled").val("正在登录...");
            //请求参数
            var myparams = {
                     "user.username": $("#username").val(),
                     "user.password": $("#password").val(),
                     "captcha": $("#captcha").val(),
                     "logType": $("#logType").attr("value")
            };
            if(false == /\w{5,20}/g.test($("#username").val())){
                //启用登陆按钮
                $(".butn").removeAttr("disabled").val("登录");
                $("#username").focus();
                $(".tips").html("请输入正确的用户名").fadeIn("normal");
            }else if(false == /\w{5,32}/g.test($("#password").val())){
                //启用登陆按钮
                $(".butn").removeAttr("disabled").val("登录");
                $("#password").focus();
                $(".tips").html("请输入正确的密码").fadeIn("normal");
            }else if(false == /\d{4}/g.test($("#captcha").val())){
                //启用登陆按钮
                $(".butn").removeAttr("disabled").val("登录");
                $("#captcha").focus();
                $(".tips").html("请输入正确的验证码").fadeIn("normal");
            }else{
                //异步登录
                $.ajax({
                    url: "${pageContext.servletContext.contextPath}/userLoginWithCaptchaAction.action",
                    async: false,
                    type: "post",
                    data: myparams,
                    dataType: "json",
                    success: function(data){
                        if(data.result){
                            window.location="${pageContext.servletContext.contextPath}/userMainAction.action";
                        }else{
                            //启用登陆按钮
                            $(".butn").removeAttr("disabled").val("登录");
                            $(".tips").html(data.errormessage).fadeIn("normal");
                        }
                    },
                    error: function(){
                        //启用登陆按钮
                        $(".butn").removeAttr("disabled").val("登录");
                        $(".tips").html("无服务响应，登录失败！").fadeIn("normal");
                    },

                });
            }
            return false;
        });