6

目標:
ステップ 1: JQuery ダイアログでフォームが開きます。ユーザー ユーザー名とパスワードを入力し、[ログイン] をクリックします。 ステップ 2: Ajax サーバー側スクリプト (私の場合は loginproc.php) にデータを送信します。
ステップ 3: loginproc を使用してログインを検証します。ログインが成功すると、ユーザーはページにリダイレクトされます。
ステップ 4:それ以外の場合、メッセージがダイアログに送り返され、シェイク効果とともにダイアログ自体に追加されます。

今のところ、「$("#admin-form").sumbit();」を使用すると、ステップ 1 と 3 が正常に機能します。ダイアログを閉じる直前。無効なログイン テキストをダイアログに設定する方法がわかりません。

コード：

$(function() {
    var name = $("#name"),
            password = $("#password"),
            allFields = $([]).add(name).add(password),
            tips = $(".validateTips");

    function updateTips(t) {
        tips
                .text(t)
                .addClass("ui-state-highlight");
        setTimeout(function() {
            tips.removeClass("ui-state-highlight", 1500);
        }, 500);
    }

    function checkLength(o, n, min, max) {
        if (o.val().length > max || o.val().length < min) {
            o.addClass("ui-state-error");
            updateTips("Length of " + n + " must be between " +
                    min + " and " + max + ".");
            return false;
        } else {
            return true;
        }
    }

    function checkRegexp(o, regexp, n) {
        if (!(regexp.test(o.val()))) {
            o.addClass("ui-state-error");
            updateTips(n);
            return false;
        } else {
            return true;
        }
    }

    $("#login-form").dialog({
        autoOpen: false,
        /*      height: 300, */
        width: 450,
        show: {
            effect: "explode",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        },
        modal: true,
        buttons: {
            "Login": function() {
                var bValid = true;
                allFields.removeClass("ui-state-error");

                bValid = bValid && checkLength(name, "username", 3, 16);
                bValid = bValid && checkLength(password, "password", 5, 32);
                bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
                bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z_])+$/, "Password field only allow : a-z 0-9");
                if (bValid) {
                    $("#admin_login").submit();
                    $(this).dialog("close");
                }
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            allFields.val("").removeClass("ui-state-error");
        }
    });

    // Link to open the dialog
    $("#admin-link").click(function(event) {
        $("#login-form").dialog("open");
        event.preventDefault();
    });

});

これは、いくつかの変更を加える必要があるコードのセクションです。

if (bValid) {
     $("#admin_login").submit();
     $(this).dialog("close");
}

これを理解するのを手伝ってください

更新: フォーム:

<form method="post" action="class/loginproc.php" id="admin_login">
<fieldset>
 <label for="name">Username</label>
<input type="text" name="user" id="name" class="text ui-widget-content ui-corner-all" />
 <label for="password">Password</label>
<input type="password" name="pass" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>

Loginproc.php

<?php

require_once 'utils.php';
if (is_null($_POST['user']) || is_null($_POST['pass'])) {
    utils::redirect_url("../index.php");
} else {
    $utils = new utils();
    $username = $_POST['user'];
    $password = $_POST['pass'];
    $type = 'admin';
    $response = $utils->validate_user($username, $password, $type);
    if ($response == true) {
        return true;
        /*
          $utils->login_redirect($type); */
    } else {
        return false;
        /* $_SESSION['valid'] = false;
          utils::redirect_url("../index.php"); */
    }
}
?>

Jクエリ:

 if (bValid) {
 var data = $('#admin_login').serialize();
 $.ajax({
 url: "class/loginproc.php",
 type: "post",
 data: data,
 dataType: "json",
 success: function(data) {
 if (data.success) {
   window.location = "../admin.php";
 }
 else {
   alert('Invalid Login');
  }
 }
                });
                $(this).dialog("close");
            }

解決策: 「Mohammad Adil」のおかげで、これを理解することができました。適切な結果を得るには、提供されたソリューションを少し変更する必要がありました。したがって、今後の参考のためにここに投稿します。
Jクエリ

  if (bValid) {
     var data = $('#admin_login').serialize();
     $.ajax({
     url: "class/loginproc.php",
     type: "post",
     data: data,
     dataType: "json",
     success: function(data) {
      window.location = "admin.php";
     },
     error: function(data) {
       alert('invalid');
     }
   });
   $(this).dialog("close");
  }

ログイン手順:

  $response = $utils->validate_user($username, $password, $type);
    if ($response == true) {
        echo true;
    } else {
        echo false;
    }

よろしく
Genocide_Hoax

4

2 に答える 2

2 
 if (bValid) {
    var data = $('#admin_login').serialize();                  
          $.ajax({
              url:"loginproc.php",
              type: "post",
              data : data,
              dataType:"text",
              success:function(data){
                  if(data == "true"){ 
                    window.location = "some location";
                  }
                 else{
                       // LOGIN FAILED
                 }
              }
           });
         $(this).dialog("close");
 }
于 2013-04-13T10:32:03.930 に答える
1

メソッドとアクションをフォームに入れますが、省略しないとデータが非同期に送られなくなるので、Ajaxで作業する場合は省略したほうがいいと思います。

于 2013-06-19T13:02:12.367 に答える