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

Question

<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;
        });
    })

	</script>

Answer 1

一般写法  事件是绑定在登录  按钮 btn上

Answer 2

<input
type="submit"
value="登 录"
id="btn"
class="am-btn am-btn-primary am-btn-sm am-btn-block am-fl">改成type="button"

Answer 3

引用来自“ousui”的评论

不封装的JS都不是好JS

Answer 4

不封装的JS都不是好JS

Answer 5

@泡泡队长
@闲大赋 多谢~~ 问题己贴出来了

Answer 6

直接在ready后台 加个alert是可以出来结果的

Answer 7

控制台啥都没有啊。。。

Answer 8

将js报的错误贴出来！

Answer 9

这个是js问题，不用at beetl啊， 进入不了jquery ajax方法，必然是报错了，看看浏览器debug console吧

如果没有错误，那是点击事件没有绑定

Answer 10

<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="/" 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>    

     这样可以提交