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

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-07-14 14:29:50 2486 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

回答

jQuery的AJAX提交问题

2016-07-05 10:59:57 1994浏览量 回答数 1

1

回答

jquery ajax 赋值 回调函数

2016-07-06 16:41:14 1730浏览量 回答数 1

1

回答

jquery ajax返回值遍历怎么取出需要的部分加到表格里

2016-05-31 10:56:06 1757浏览量 回答数 1

1

回答

jquery里面ajax自动补全jsonp回调函数名如何实现的以及jq使用了哪些http方法?

2016-05-31 11:44:52 3452浏览量 回答数 1

1

回答

关于jquery以及bootstrap合并使用ajax兼容性问题

2016-05-31 15:40:54 2899浏览量 回答数 1

1

回答

求助springMVC中@response和jquery的ajax提取报406错误

2016-05-31 18:08:01 2195浏览量 回答数 1

1

回答

用jquery ajax的load方法后怎么再次获得load的url信息问题

2016-05-31 22:46:15 2472浏览量 回答数 1

1

回答

ajax怎么传jquery获取到复选框选中的值给后台,后台怎么接收?

2016-06-01 01:03:20 3127浏览量 回答数 1

1

回答

关于用jquery的$.ajax()方法获取html文档片段的问题?

2016-05-30 17:22:16 1740浏览量 回答数 1

1

回答

求助关于ajax jquery asp.net综合问题

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