1

AJAX 経由で送信しようとしているログイン フォームがあります。完璧に機能する登録用の同様のフォームがあります。ただし、return false ステートメントは実行されません。

私のログインフォームは次のようになります。

  <form name="loginForm" id="loginForm" action="userSystem/userSystem.php" method="post">
    <div class="loginTable">
      <div class="loginRow">
        <div class="loginCell"><label for="username">Username:</label></div>
          <div class="loginCell"><input type="text" name=="username" id="loginFormUser"></div>
        </div>
      <div class="loginRow">
        <div class="loginCell"><label for="password">Password:</label></div>
          <div class="loginCell"><input type="password" name="password" id="loginFormPass"></div>
        </div>
      <div class="loginRow">
        <div class="loginCell">&nbsp;</div>
        <div class="loginCell"><input type="submit" name="submit" value="Log In" id="loginFormSubmit"></div>
      </div>
    </div>
  </form>
</section>
<section id="loginBarRegForm">
  <h1>Step Two</h1>
  <form name="regForm" id="regForm" action="usersystem/register.php" method="post">
    <div class="loginTable">
      <div class="loginRow">
        <div class="loginCell"><label for="r_username">Username:</label></div>
        <div class="loginCell"><input type="text" name="r_username" id="r_username"></div>
        <div class="loginCell"><span id="r_usernameFeedback"></span></div>
      </div>
      <div class="loginRow">
        <div class="loginCell"><label for="r_password">Password:</label></div>
        <div class="loginCell"><input type="password" name="r_password" id="r_password"></div>
        <div class="loginCell"><span id="r_passwordFeedback"></span></div>
      </div>
      <div class="loginRow">
        <div class="loginCell"><label for"r_vpassword">Verify Password</label></div>
        <div class="loginCell"><input type="password" name="r_vpassword" id="r_vpassword"></div>
        <div class="loginCell"><span id="r_vpasswordFeedback"></span></div>
        </div>
      <div class="loginRow">
        <div class="loginCell"><label for="email">Email:</label></div>
        <div class="loginCell"><input type="text" name="r_email" id="r_email"></div>
        <div class="loginCell"><span id="r_emailFeedback"></span></div>
        </div>
      <div class="loginRow">
        <div class="loginCell"></div>
        <div class="loginCell"><input type="submit" name="r_submit" value="Register" id="r_submit"></div>
        <div class="loginCell"></div>
        </div>
      </div>
  </form>

そして、送信ボタンがクリックされたときに実行しようとしているJavaScript

$("#loginFormSubmit").click(function() {
  form_data = {
    username: $("#loginFormUser").val(),
    password: $("#loginFormPass").val(),
    operation: "login",
    is_ajax: 1
  }

  $.ajax({
    type: "POST",
    url: "userSystem/userSystem.php",
    data: form_data,
    dataType: json,
    success: function(data) {
      if(data.success) {
        $("#loginBarLoginForm").fadeOut("slow");
        $("#userDetailsUsername").html(data.username);
        $("#userDetailsEmail").html(data.email);
        $("#userDetails").fadeIn('slow');
      } else {
        $("#loginbarLoginForm").fadeOut("slow");
        $("#loginBoxResponseDiv").html(data.message);
        $("#loginBoxResponseFrame").fadeIn("slow");
      }
    }
  });
  return false;
});

これまでのところ、これは私が開発した最も詳細なアプリケーションに関するものですが、return false があるインスタンスでは機能するのに、別のインスタンスでは機能しない理由については意味がありません。これらは、データを除いてほぼ同じ機能です。

あなたが提供できる助けをありがとう:)

編集: コードを更新しました。

    $("#loginFormSubmit").click(function() {
    console.log("Click Event Firing");
    var form_data = {
        username: $("#loginFormUser").val(),
        password: $("#loginFormPass").val(),
        operation: "login",
        is_ajax: 1
    };
    console.log("variables Assigned " + form_data['username'] + " " + form_data ['password']);

    $.ajax({
        type: "POST",
        url: "userSystem/userSystem.php",
        data: form_data,
        success: function(data) {
            console.log("Ajax Working");
            if(data.success === true) {
            $("#loginBarLoginForm").hide();
                $("#loginBoxResponseDiv").html("<p>You have been loged in " + data.username + "!");
                $("#loginBoxResponseFrame").fadeIn("slow");
            } else {
                $("#loginBarRegForm").hide();
                $("#loginBoxResponseDiv").html(data.message);
                $("#loginBoxResponseFrame").fadeIn("slow");
            }
        }
    });
});

コードは JSON 応答を返すようになりましたが、成功のための関数は起動されていません。

4

4 に答える 4

3

return falseajaxサブミットのデフォルトアクションを防ぐために、ハンドラーの内側ですが、ハンドラーの外側です。

$("#loginForm").on('submit',function() {  //attach handler to form
    form_data = {...}                     //form data
    $.ajax({...});                        //fire ajax
    return false;                         //prevent default action
});
于 2012-05-09T04:56:53.523 に答える
0

return false は必要に応じて機能していますが、問題は、Success メソッドが callback であり、ajax 呼び出しでサーバー側から成功メッセージがあるたびに Jquery によって暗黙的に呼び出されるため、その時点ではハンドルがないことです。それから値を取得するには、別のメソッドでロジックを定義し、ここでメソッド呼び出しを行う必要があります。そのコールバックとして、操作するハンドルがありません。

そうです、$.ajax()return false の呼び出しを返したい場合は、return false ステートメントを success メソッドの範囲外に削除できます。

于 2012-05-09T04:58:23.457 に答える
0

結局のところ、私は自分のソリューションでいくつかの引用符を見逃していました。私は交換する必要がありました：

    dataType: json,

と：

    dataType: "json",

それを取得すると、ソリューションが配置され、ユーザーはページを更新せずにログインできるようになります. このプロジェクトにはまだ長い道のりがありますが、私を正しい方向に向けてくれてありがとう。また、自分で答えを見つけることができたことに満足しています。しかし、SO コミュニティから得た素晴らしい助けとヒントがなければ、私は決してそうしなかったでしょう。あなたたちは100万分の1です！

最終的な解決策は次のようになりました。

    $("#loginFormSubmit").click(function() {
    console.log("Click Event Firing");
    var form_data = {
        username: $("#loginFormUser").val(),
        password: $("#loginFormPass").val(),
        operation: "login",
        is_ajax: 1
    };
    console.log("variables Assigned " + form_data['username'] + " " + form_data ['password']);

    $.ajax({
        type: "POST",
        url: "userSystem/userSystem.php",
        dataType: "json",
        data: form_data,
        success: function(data) {
            console.log("Ajax Working");
            console.log("data.success: " + data.success);
            console.log("data.username: " + data.username); 
            if(data.success === true) {
                console.log("data.success was true");
                $("#loginBarLoginForm").hide();
                $("#loginBoxResponseDiv").html("<p>You have been loged in " + data.username + "!");
                $("#loginBoxResponseFrame").fadeIn("slow");
                $("#notLoggedIn").fadeOut("slow");
                $("#currentlyLoggedIn").fadeIn("slow");
                $.cookie("username", data.username, {expires: 7, path: "/"});
                $.cookie("id", data.id, {expires: 7, path: "/"});
                $.cookie("email", data.email, {expires: 7, path: "/"});
                $.cookie("user_level", data.user_level, {expires: 7, path: "/"});
                $.cookie("active", data.active, {expires: 7, path: "/"});
                $.cookie("reg_date", data.reg_date, {expires: 7, path: "/"});
                $.cookie("last_login", data.last_login, {expires: 7, path: "/"});
                $("#cookieUsername").html($.cookie("username"));
                $("#cookieID").html($.cookie("id"));
                $("#cookieEmail").html($.cookie("email"));
                $("#cookieUserLevel").html($.cookie("user_level"));
                $("#cookieActive").html($.cookie("active"));
                $("#cookieRegDate").html($.cookie("reg_date"));
                $("#cookieLastLogin").html($.cookie("last_login"));
            } else {
                console.log("data.success was false");
                $("#loginBarRegForm").hide();
                $("#loginBoxResponseDiv").html(data.message);
                $("#loginBoxResponseFrame").fadeIn("slow");
            }
        }
    });
});
于 2012-05-09T16:20:56.940 に答える
0

単なるアイデアですが、入力のタイプを「送信」から「ボタン」に変更します。

また、デバッグ目的のためだけに、クリック イベントを動的に割り当てないでください。JS を次のように変更します。

function NamedFunction() {
  form_data = {
    username: $("#loginFormUser").val(),
    password: $("#loginFormPass").val(),
    operation: "login",
    is_ajax: 1
  }

  $.ajax({
    type: "POST",
    url: "userSystem/userSystem.php",
    data: form_data,
    dataType: json,
    success: function(data) {
      if(data.success) {
        $("#loginBarLoginForm").fadeOut("slow");
        $("#userDetailsUsername").html(data.username);
        $("#userDetailsEmail").html(data.email);
        $("#userDetails").fadeIn('slow');
      } else {
        $("#loginbarLoginForm").fadeOut("slow");
        $("#loginBoxResponseDiv").html(data.message);
        $("#loginBoxResponseFrame").fadeIn("slow");
      }
    }
  });
  return false;
}

次に、これを送信ボタンに追加します

onclick="NamedFunction(); return false;"

そのままにしておくことはお勧めしませんが、おそらくこれら 2 つの変更により、何が起こっているのかを実際に追跡できるようになります。

于 2012-05-09T06:45:02.983 に答える