1

ログインフォームの例 (5 番)を試す:

ファンシーボックス

クリックしてデータを確認すると、ページがリロードされるだけです。私が理解している限りでは、ajax はまさにこのことを回避するはずです。

明確化していただければ幸いです。比較的単純な問題だと思います。

文字通り、コードをコピーして貼り付けただけです。「mail.php」は現在実際には何もしていませんが、何よりもまず、#login_name と #login_pass の長さが 1 未満の場合に発生するはずの「#login_error」をトリガーしようとしています。現状では、ページが更新されるだけです。

それにもかかわらず、参照用のコード: js -

    $(document).ready(function() {

$("#tip5").fancybox({
    'scrolling'     : 'no',
    'titleShow'     : false,
    'onClosed'      : function() {
        $("#login_error").hide();
    }
});

$("#login_form").bind("submit", function() {

    if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }

    $.fancybox.showActivity();

    $.ajax({
        type        : "POST",
        cache   : false,
        url     : "mail.php",
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });

    return false;
});

    });

html -

      <a id="tip5" href="#login_form">test</a>

<div style="display:none">
    <form id="login_form" method="post" action="">
                <p id="login_error">Please, enter data</p>
            <p>
                <label for="login_name">Login: </label>
                <input type="text" id="login_name" name="login_name" size="30" />
            </p>
            <p>
                <label for="login_pass">Password: </label>
                <input type="password" id="login_pass" name="login_pass" size="30" />
            </p>
            <p>
                <input type="submit" value="Login" />
            </p>
            <p>
                <em>Leave empty so see resizing</em>
            </p>
    </form>
</div>
4

1 に答える 1

1

次の順序でファイルを追加する必要があります

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>

そうでなければあなたのコードは正しい

于 2012-07-24T08:31:37.503 に答える