2015-04-29 4 views
0

В основном у меня есть страница входа в AJAX, которая работает и все, но когда я успешно вхожу в систему, я хочу, чтобы она перенаправлялась на страницу без перезагрузки. Я не уверен, как это делается как Я очень новичок в langauge. Большое спасибоAJAX PHP LOGIN Страница не перенаправляется правильно

index.php 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="jquery.js"></script> 
<link rel="stylesheet" href="styles.css" type="text/css" /> 
<title>Popup Login</title> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#login_a").click(function(){ 
     $("#shadow").fadeIn("normal"); 
     $("#login_form").fadeIn("normal"); 
     $("#user_name").focus(); 
    }); 
    $("#cancel_hide").click(function(){ 
     $("#login_form").fadeOut("normal"); 
     $("#shadow").fadeOut(); 
    }); 
    $("#login").click(function(){ 

     username=$("#user_name").val(); 
     password=$("#password").val(); 
     $.ajax({ 
      type: "POST", 
      url: "login.php", 
      data: "name="+username+"&pwd="+password, 
      success: function(html){ 
       if(html=='1') 
       { 
       $("#login_form").fadeOut("normal"); 
       $("#shadow").fadeOut(); 
       $("#profile").html("<a href='logout.php' id='logout'>Logout</a>"); 

       } 
       else 
       { 
        $("#add_err").html("Wrong username or password"); 
       } 
      }, 
      beforeSend:function() 
      { 
       $("#add_err").html("Loading...") 
      } 
     }); 
     return false; 
    }); 
}); 
</script> 
</head> 
<body> 
<?php session_start(); ?> 
    <div id="profile"> 
     <?php if(isset($_SESSION['user_name'])){ 
      ?> 
      <a href='logout.php' id='logout'>Logout</a> 
     <?php }else {?> 
     <a id="login_a" href="#">login</a> 
     <?php } ?> 
    </div> 
    <div id="login_form"> 
     <div class="err" id="add_err"></div> 
     <form action="login.php"> 
      <label>User Name:</label> 
      <input type="text" id="user_name" name="user_name" /> 
      <label>Password:</label> 
      <input type="password" id="password" name="password" /> 
      <label></label><br/> 
      <input type="submit" id="login" value="Login" /> 
      <input type="button" id="cancel_hide" value="Cancel" /> 
     </form> 
    </div> 
    <div id="shadow" class="popup"></div> 
</body> 
</html> 

login.php

<?php 
session_start(); 
$username = $_POST['name']; 
$password = $_POST['pwd']; 
$mysqli=mysqli_connect(''); 
$query = "SELECT * FROM user WHERE username='$username' AND password='$password'"; 
$result = mysqli_query($mysqli,$query)or die(mysqli_error()); 
$num_row = mysqli_num_rows($result); 
$row=mysqli_fetch_array($result); 
if($num_row >=1) { 
    echo '1'; 
    $_SESSION['user_name']=$row['username']; 
} 
else{ 
echo 'false'; 
} 
?> 
+0

Ваш код уязвим для SQL-инъекции, вы должны избегать вашего имени пользователя и пароля с помощью 'mysqli_real_escape_string'. – jcubic

+0

, когда ajax завершен, скрыть форму входа и использовать другую загруженную ajax загруженную панель мониторинга – madalinivascu

+0

Лучше перенаправить с страницы входа на страницу приложения и использовать только приложение Ajax. Страница входа должна содержать только достаточный код, чтобы позволить пользователю войти в систему и, возможно, предложить забытый пароль или ссылку поддержки. Таким образом, несанкционированные посетители не могут ничего узнать о вашей логике приложения. – user2182349

ответ

0

Когда я успешно войти в систему, я хочу, чтобы перенаправить на страницу без ее перезагрузки

Пока страница будет перенаправлен или находится в одном домене, или вы можете правильно настроить заголовки CORS, и вы можете иметь дело с относительными ссылками, а затем в своем обратном вызове успеха вы можете заменить HTML всей страницы ссылкой на ne w.

Вы можете запустить другой АЯКС вызов для новой страницы, а также использовать document.write() уничтожить существующий HTML следующим образом:

... 
success: function(html){ 
    if(html=='1') { 
     $("#login_form").fadeOut("normal"); 
     $("#shadow").fadeOut(400, function(){ 

      // Completely replace the page's HTML 
      $.ajax({ 
       type: 'GET', 
       url: 'http://example.com/logged-in', 
       async: false, // You want this synchronous 
       success: function(data) { 

        // This code block replaces your current page seamlessly 
        document.open(); 
        document.write(data); 
        document.close(); 

       }, 
       error: function(e){ 
        alert(e.message); 
       } 
      }); 
     }); 
    } 
    ... 

Вот демо:

$("#bye").fadeOut(1400, function(){ 
 
\t $.ajax({ 
 
\t \t type: 'GET', 
 
\t \t url: 'http://enable-cors.org/', 
 
\t \t async: false, 
 
\t \t success: function(data) { 
 
        // This is a quick-n-dirty hack 
 
        // to get the relative links working for the demo 
 
\t \t var base_href = '<base href="http://enable-cors.org/">'; 
 

 
\t \t document.open(); 
 
\t \t document.write(base_href + data); 
 
\t \t document.close(); 
 
\t \t }, 
 
\t \t error: function(e){ 
 
\t \t alert(e.message); 
 
\t \t } 
 
\t }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="bye"><h1>Logged in Successfully</h1></div>

Смежные вопросы