AJAX PHP登录页面未正确重定向

Question

Basically I've got a AJAX Login page that is working and everything but when I successfully login I want it to redirect to a page without it reloading I'm not sure how its done as I am very new to langauge. 基本上，我有一个正常工作的AJAX登录页面，但是当我成功登录时，我希望它重定向到页面而不重新加载它，我不确定它是如何做的，因为我对langauge很陌生。 Many thanks 非常感谢

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 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';
 }
?>

Answer 1

When I successfully login I want it to redirect to a page without it reloading 成功登录后，我希望它重定向到页面而不重新加载

As long as the page to be redirected to is on the same domain, or you can set CORS headers properly, and you can deal with relative links, then in your success callback you can replace the entire page's HTML with that of the new page. 只要要重定向的页面在同一域上，或者您可以正确设置CORS标头，并且可以处理相对链接，那么在成功回调中，您可以将整个页面的HTML替换为新页面的HTML。

You can start another ajax call for your new page, and use document.write() to obliterate the existing HTML like so: 您可以为新页面启动另一个ajax调用，并使用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);
                }
            });
        });
    }
    ...

Here is a demo: 这是一个演示：

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

 <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>

AJAX PHP登录页面未正确重定向

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-04-29 16:23:11

AJAX PHP登录页面未正确重定向

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-04-29 16:23:11

解决方案1
0 已采纳 2015-04-29 16:23:11