0

ねえ、私は自分の Web サイトにユーザーをログインさせるために使用する html フォームを使用しています。AJAX (jQuery) を使用するようにビルドしていますが、いくつか問題があります。

JavaScript は次のとおりです。

function validateLoginDetails() {
    $('[name=loginUser]').click(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
    });
}

html フォームは次のとおりです。

<form id="formLogin" name="loginUser" method="post">
    Username<br /><input id="username" name="username" type="text" maxlength="30" style="width:160px; border:solid 1px #444444;" /><br /><br />
    Password<br /><input id="password" name="password" type="password" maxlength="50" style="width:160px; border:solid 1px #444444;" /><br /><br />
    <input id="submit" type="submit" value="Play" style="width:100px; background:#FFFFFF; border:solid 1px #444444;" />
</form>

問題は、フォームを送信するとコードが実行されますが、以前の状態に戻るということです。これは奇妙に聞こえるかもしれませんが、div サイズが変更され、元のサイズに戻った直後に表示されるのでわかります。 .

何か案は？

編集:たとえば、以下のリンクを使用してコードを実行すると、正常に動作します。

<a href="#" name="loginUser">Clicky</a>
4

4 に答える 4

4

AJAX 呼び出しを実行した後に実際のフォーム ポストを実行しないように、ハンドラーから false を返す必要があります。

これが私がすることです。

$(function() {
     $('#formLogin').submit( function() {
         $('#mainWrap').css( { width: '600px', height: '200px' });
         $.post( 'modules/web/loginForm.php',
                 $(this).serialize(),
                 function(data) {
                     $('#interfaceScreen').html(data);
                 }
         );
         return false;
     });
});

URL (ユーザー名とパスワードを含む) が最終的に Web ログに公開されないようにするために投稿を使用していることに注意してください。また、フォームを含むページが https 経由で読み込まれたため、投稿も保護されると想定しています。

于 2009-10-21T23:37:25.373 に答える
0

フォームの送信を扱っている場合は、.click() イベント ハンドラーではなく、.form() イベント ハンドラーを選択する必要があります。前者では、フォームが他の方法で送信された場合でもチェックは実行されますが、クリックはアクションを実行する単一の要素に依存します。また、このイベントで false または preventDefault() を返す必要があるため、関数が実際に正しく起動します。

もう1つのこと（これは、提供したコードサンプリングに基づいて非常に重要でない可能性があります）は、呼び出される必要がある関数でそのイベントハンドラーをバインドしていることです。下記参照）？

個人的には、次のようにコードを作り直します。

$(document).ready(function() {
    $('#formLogin').submit(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
        return false;
    });
});
于 2009-10-22T04:22:08.047 に答える