ajax提交form表单,ajax方法进不去,表单也提交不了。-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

2016-07-14 14:29:50 2411 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;
        });
    })
<p>
    </script>
</p>
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:56:16
        #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 0
相关问答

1

回答

spring mvc ajaxform 导入文件时 返回json数据 ie下提示下载

2016-07-13 16:43:37 1937浏览量 回答数 1

1

回答

spring mvc ajaxform 导入文件时 返回json数据 ie下提示下载

2016-03-18 14:50:27 2969浏览量 回答数 1

1

回答

怎样在外部读取到jquery ajax中回调函数的值

2016-05-27 08:51:40 1766浏览量 回答数 1

1

回答

jquery ajax的success中给外部定义的变量赋值,外部引用的话为空?

2016-03-26 09:07:46 2053浏览量 回答数 1

1

回答

jquery ajax 如何避免重复提交

2016-03-24 10:44:49 1617浏览量 回答数 1

1

回答

jquery ajax和post的问题,两者有什么不同?

2016-03-24 09:06:23 1522浏览量 回答数 1

1

回答

用 jquery ajax 实现点击图片提交form问题

2016-03-24 09:31:02 1544浏览量 回答数 1

1

回答

jquery $.ajax() 同步与异步区别

2016-03-24 10:29:52 1834浏览量 回答数 1

1

回答

jquery ajax访问网页如何带上cookies?

2016-03-13 08:10:54 2285浏览量 回答数 1

1

回答

如何判断多个Jquery.ajax全部请求完毕?

2016-03-11 13:48:12 1780浏览量 回答数 1
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载