3

従来のhtmlフォーム投稿を使用して送信すると正常に機能するログインフォームがあります

<form class="form-horizontal" id="loginform">
    <div class="control-group">
        <label class="control-label" for="user_name">
            Username or E-Mail
        </label>
        <div class="controls">
            <input type="text" id="user_name" name="user_name" autofocus>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="password">
            Password
        </label>
        <div class="controls">
            <input type="password" id="password" name="password">
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox">Remember me
            </label>
            <br>
            <button type="submit" class="btn" id="submit_login">
                Sign-in
            </button>
        </div>
    </div>
</form>

ページをリダイレクトする代わりに、ユーザーにログインして同じページにとどまるようにしたいと思います。私はこれを行うために以下のjQueryを持っています

$(document).ready(function(){
    $("#submit_login").click(function(){
        var user_name = $("#user_name").val();
        var password = $("#password").val();
        $.post("login.php", {user_name: user_name, password: password});
    });
});

しかし、これは投稿ではなく、私のセッションは開始されていません。jQueryの「user_name」変数と「password」変数を出力しましたが、フォームから正しい値を取得しています。'login.php'ファイルが検索する変数は、'user_name'および'password'でもあります。スクリプトを実行してもコンソールエラーはありません。

ここで切断の原因は何ですか？

4

2 に答える 2

2

$.postデフォルトのフォーム送信を回避するために、送信する直前にデフォルトのアクションを防止する必要があります。そうしない$.postと、（ほとんどの場合）中止されます。

$(document).ready(function(){
    $("#submit_login").click(function(event){
        event.preventDefault(); // stop form submit
        var user_name = $("#user_name").val();
        var password = $("#password").val();
        $.post("login.php", {user_name: user_name, password: password});
    });
});
于 2013-03-12T14:47:28.243 に答える
2

これは、jQuery val（）メソッドとBootstrapのbtnクラスの組み合わせであり、デフォルトで送信ボタンとしてスタイル設定されたボタンを使用していました。切り替えました

    var user_name = $("#user_name").val();
    var password = $("#password").val();

に

    var user_name = document.getElementById("user_name").value;
    var password = document.getElementById("password").value;

と

<button type="submit" class="btn" id="submit_login">

に

<button type="button" class="btn" id="submit_login">

そしてAJAXは期待通りに機能しました。

重要なのは、タイプの割り当てをまとめて削除するのではなく、「送信」を「ボタン」に変更することでした。タイプが指定されていない場合、ボタンのデフォルトは「送信」です。

于 2013-03-13T19:40:08.567 に答える