0

我正在尝试创建一个带有 jquery 支持的文件 html，它会检查一些 cookie。如果存在 cookie，它会填写一个表格并提交（一切都在加载！）。如果 cookie 不存在，它会显示一个登录表单。

所以我想要开发的是一个带有登录表单的页面，用于首次访问和其他访问“重定向”到另一个域上的另一个页面。

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>mylocalpage</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
            <script src="http://mysite.com/jquery-cookie.js"></script>
            $(document).ready(function(){
                var ag = $.cookie("agenc");
                var op = $.cookie("oper");
                var pa = $.cookie("pass");
                if(ag==null || op==null || pa==null){
                    var loginBox = $('#login-box');
                    $(loginBox).fadeIn(300);
                    var popMargTop = ($(loginBox).height() + 24) / 2; 
                    var popMargLeft = ($(loginBox).width() + 24) / 2; 

                    $(loginBox).css({ 
                        'margin-top' : -popMargTop,
                        'margin-left' : -popMargLeft
                    });
                    $('body').append('<div id="mask"></div>');
                    $('#mask').fadeIn(300);
                }else{
                    $('#txtAgency_ext').val(ag);
                    $('#txtUsername_ext').val(op);
                    $('#txtPassword_ext').val(pa);
                    $('#form').submit();
                }
            });
            function saveData(){
                var ag = $('#txtAgency_ext').val(), op = $('#txtUsername_ext').val(), pa = $('#txtPassword_ext').val();
                if(ag.length>0 && op.length>0 && pa.length>0){
                    $.cookie("agenc",ag,{ expires: 365,path:"/" });
                    $.cookie("oper",op,{ expires: 365,path:"/" });
                    $.cookie("pass",pa,{ expires: 365,path:"/" });
                    $('#form').submit();
                }else{
                    alert('All field required!');
                }
            }
        </script>
    </head>
    <body>
        <style>
            #mask {
    display: none;
    background: #000; 
    position: fixed; left: 0; top: 0; 
    z-index: 10;
    width: 100%; height: 100%;
    opacity: 0.8;
    z-index: 999;
}

.login-popup{
    display:none;
    background: #333;
    padding: 10px;  
    border: 2px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%; left: 50%;
    z-index: 99999;
    box-shadow: 0px 0px 20px #999;
    -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
    border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px; /* Firefox */
    -webkit-border-radius: 3px; /* Safari, Chrome */
}

img.btn_close {
    float: right; 
    margin: -28px -28px 0 0;
}

fieldset { 
    border:none; 
}

form.signin .textbox label { 
    display:block; 
    padding-bottom:7px; 
}

form.signin .textbox span { 
    display:block;
}

form.signin p, form.signin span { 
    color:#999; 
    font-size:11px; 
    line-height:18px;
} 

form.signin .textbox input { 
    background:#666666; 
    border-bottom:1px solid #333;
    border-left:1px solid #000;
    border-right:1px solid #333;
    border-top:1px solid #000;
    color:#fff; 
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font:13px Arial, Helvetica, sans-serif;
    padding:6px 6px 4px;
    width:200px;
}
        </style>
        <div id="login-box" class="login-popup">
            <form method="post" id="form" name="login" action="http://a.page.com">
                <label>
                    <span>Agency</span>
                    <input id="txtAgency_ext" name="txtAgency_ext" value="" type="text">
                </label>

                <label>
                    <span>Operator</span>
                    <input id="txtUsername_ext" name="txtUsername_ext" value="" type="text">
                </label>

                <label>
                    <span>Password</span>
                    <input id="txtPassword_ext" name="txtPassword_ext" value="" type="password">
                </label>
          </form>
          <button class="button" onclick="saveData()">Save and submit!</button>
        </div>
    </body>
</html>

我的问题是，当提交表单时，页面被重定向到她自己，所以这对夫妇提交->重定向->提交->重定向等无限时间......我该如何解决？谢谢！

编辑：这里发生了什么：

http://jsfiddle.net/x96qV/

4

1 回答 1

0

让我们检查一下您的应用程序的流程。

  1. 用户点击提交按钮，设置 cookie 并提交表单。页面重新加载。
  2. 页面加载并检查 cookie。它们存在，所以else语句被执行。这包括$('#form').submit();提交表单的行。页面重新加载。
  3. 无限期地重复第 2 步。

因此，您需要删除该$('#form').submit();行以阻止表单无限期地自行提交。

于 2012-11-21T16:08:46.753 回答