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

奋进的小莫 发布于 2016/01/18 15:56
阅读 6K+
收藏 1
<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>



加载中
0
你若安好
你若安好
<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>    



     这样可以提交
0
闲大赋
闲大赋

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


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



0
泡泡队长
泡泡队长
将js报的错误贴出来!
0
奋进的小莫
奋进的小莫

控制台啥都没有啊。。。

0
奋进的小莫
奋进的小莫


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

0
奋进的小莫
奋进的小莫
@泡泡队长 @闲大赋 多谢~~ 问题己贴出来了
0
o
ousui
不封装的JS都不是好JS
0
奋进的小莫
奋进的小莫

引用来自“ousui”的评论

不封装的JS都不是好JS
大兄弟,我把放一起 不是方便提问题么。。
0
panda大侠
panda大侠
<input type="submit" value="登 录" id="btn" class="am-btn am-btn-primary am-btn-sm am-btn-block am-fl">改成type="button"
0
panda大侠
panda大侠
一般写法  事件是绑定在登录  按钮 btn上
返回顶部
顶部