开发者社区> 问答> 正文

ajax提交form表单,ajax方法进不去,表单也提交不了。

<style rel="stylesheet" type="text/css">
    #loginDiv {
        margin: 50px 0 0 3px;
    }
 
    .right-qq {
        margin-left: 50px;
    }
 
    input {
        width: 100px;
    }
</style>
<form method="post" action="${ctxPath}/ajax/session" class="am-form" style="display:none;"
      id="loginForm">
    <div id="loginDiv">
        <div class="am-input-group">
            <span class="am-input-group-label"><i class="am-icon-envelope-o am-icon-fw"></i></span>
            <input type="email" name="email" class="am-form-field" placeholder="邮箱" required>
        </div>
        <br>
        <div class="am-input-group">
            <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
            <input type="password" name="password" class="am-form-field" placeholder="密码" required>
        </div>
        <label for="remember-me">
            <input id="remember-me" name="remember" value="1" type="checkbox" checked> 记住密码
        </label>
        <br/>
        <div class="am-cf">
            <input type="submit" value="登 录" id="btn" class="am-btn am-btn-primary am-btn-sm am-btn-block am-fl">
        </div>
        <br>
        <div class="am-input-group">
            <span class="right-qq"> 其他登录方式</span>
            <a href="${ctxPath}/api/qq" class="right-qq"><i class="am-icon-qq am-icon-fw "></i></a>
            <a href="${ctxPath}/api/sina" class="right-qq"><i class="am-icon-weibo am-icon-fw"></i></a>
            <a href="${ctxPath}/api/github" class="right-qq"><i class="am-icon-github am-icon-fw"></i></a>
            <a href="${ctxPath}/api/osc" class="right-qq"><i class="am-icon-git am-icon-fw"></i></a>
            <a href="${ctxPath}/api/renren" class="right-qq"><i class="am-icon-renren am-icon-fw"></i></a>
        </div>
        <br>
 
        <div class="am-cf">
            <a href="${ctxPath}" class="am-fr">忘记密码 ^_^ ?</a>
        </div>
    </div>
</form>
<script type="text/javascript">
    $(document).ready(function () {
        $("#loginForm").submit(function () {
            var $form = $("#loginForm");
            $.ajax({
                url: $form.attr("action"),
                type: "post",
                dataType: "json",
                data: $form.serialize(),
                cache: "false",
                success: function (data) {
                    if (data.code === 0) {
                        layer.msg("登录成功", {shift: 1});
                        setTimeout(function () {
                            window.location.href = "${ctxPath}${from!}";
                        }, 1200);
                        return true;
                    } else {
                        layer.msg(data.message, {shift: 6});
                        return false;
                    }
                }
            });
            return false;
        });
    })
<p>
    </script>
</p>

展开
收起
a123456678 2016-07-14 14:29:50 2847 0
1 条回答
写回答
取消 提交回答
  •     #loginDiv {
            margin: 50px 0 0 3px;
        }
      
        .right-qq {
            margin-left: 50px;
        }
      
        input {
            width: 100px;
        }
    </style>
    <form method="post" action="/" class="am-form" style=" " id="loginForm">
        <div id="loginDiv">
            <div class="am-input-group">
                <span class="am-input-group-label"><i class="am-icon-envelope-o am-icon-fw"></i></span>
                <input type="email" name="email" class="am-form-field" placeholder="邮箱" required>
            </div>
            <br>
            <div class="am-input-group">
                <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
                <input type="password" name="password" class="am-form-field" placeholder="密码" required>
            </div>
            <label for="remember-me">
                <input id="remember-me" name="remember" value="1" type="checkbox" checked> 记住密码
            </label>
            <br/>
            <div class="am-cf">
                <input type="button" value="登 录" id="btn" class="am-btn am-btn-primary am-btn-sm am-btn-block am-fl">
            </div>
            <br>
            <div class="am-input-group">
                <span class="right-qq"> 其他登录方式</span>
                <a href="${ctxPath}/api/qq" class="right-qq"><i class="am-icon-qq am-icon-fw "></i></a>
                <a href="${ctxPath}/api/sina" class="right-qq"><i class="am-icon-weibo am-icon-fw"></i></a>
                <a href="${ctxPath}/api/github" class="right-qq"><i class="am-icon-github am-icon-fw"></i></a>
                <a href="${ctxPath}/api/osc" class="right-qq"><i class="am-icon-git am-icon-fw"></i></a>
                <a href="${ctxPath}/api/renren" class="right-qq"><i class="am-icon-renren am-icon-fw"></i></a>
            </div>
            <br>
      
            <div class="am-cf">
                <a href="${ctxPath}" class="am-fr">忘记密码 ^_^ ?</a>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn").click(function () {
                console.log('aa');
                var $form = $("#loginForm");
                $.ajax({
                    url: $form.attr("action"),
                    type: "post",
                    dataType: "json",
                    data: $form.serialize(),
                    cache: "false",
                    success: function (data) {
                        if (data.code === 0) {
                            layer.msg("登录成功", {shift: 1});
                            setTimeout(function () {
                                window.location.href = "${ctxPath}${from!}";
                            }, 1200);
                            return true;
                        } else {
                            layer.msg(data.message, {shift: 6});
                            return false;
                        }
                    }
                });
                return false;
            });
        })
     
        </script>
    </p>    
    2019-07-17 19:56:16
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载