Formularz logowania z jQuery AJAX i PHP

Question

Cel:
Krok 1: Formularz otwiera się okno dialogowe jQuery. Użytkownik Wpisuje nazwę użytkownika i hasło, klika Login. Krok 2: Ajax Wysyła dane do skryptu po stronie serwera, w moim przypadku loginproc.php.
Krok 3: Sprawdź poprawność logowania za pomocą identyfikatora logowania. Jeśli logowanie się powiedzie, użytkownik zostaje przywrócony do strony.
Krok 4: W przeciwnym razie wiadomość jest wysyłana z powrotem do okna dialogowego i jest dołączana do samego okna dialogowego wraz z efektem potrząsania.

Na razie krok pierwszy i trzeci działa dobrze, jeśli używam "$ (" # admin-form "). Sumbit(); ' tuż przed zamknięciem okna dialogowego. Nie jestem pewien, w jaki sposób ustawić nieprawidłowy tekst logowania w diologu.

Kod:

$(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(); 
    }); 

}); 

Jest to część kodu, w której muszę dokonać pewnych zmian.

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

uprzejmie mi pomóc rysunek to

UPDATE: postać:

<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"); */ 
    } 
} 
?> 

jQuery:

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"); 
      } 

Rozwiązanie: Dzięki Mohammad Adil '', byłem w stanie dowiedzieć się tego. Musiałem trochę zmienić jego dostarczone rozwiązanie, aby uzyskać odpowiedni wynik. W związku z tym zamieszczam go tutaj, aby móc z niego skorzystać w przyszłości.
JQUERY

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"); 
    } 

Loginproc:

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

Pozdrowienia
Genocide_Hoax

Answer 1

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"); 
} 

Answer 2

umieścić metody i działania w w formularzu, myślę, że powinno to zostać pominięte, jeśli pracujemy z Ajaxem, ponieważ jeśli nie zostanie pominięty, dane nie będą wysyłane asynchronicznie.