php - ページ内の AJAX 読み込みページ

Question

ログインスクリプトを検証する AJAX スクリプトがあります。ユーザーが間違ったデータを入力するとエラーメッセージが表示されますが、ユーザーが正しいデータを入力すると、新しいページがエラーメッセージスペースに読み込まれます。問題がどこにあるかは理解していますが、それを修正する方法がわかりません。

以下は、ログインスクリプトとcheckloginスクリプトです

login.php

<table class="loginTable" align="center">
    <tr>
        <td>
            Email:
        </td>
        <td>
            <input type="text" name="email" id="email"/>
        </td>
    </tr>
    <tr>
        <td>
            Password:
        </td>
        <td>
            <input type="password" name="password" id="password"/>
        </td>
    </tr>
    <tr>
        <td align="center" colspan="2">
            <span id="ErrorMessage"></span>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <!--Keep me logged in? <input type="checkbox" name="keeploggedin" /><br /><br />-->
            <input  id="loginButton" type="button" name="login" value="Login" onclick="processLogin()"/>
        </td>
    </tr>
</table>


<script>

    function processLogin()
{
var xmlhttp;

var email = document.getElementById("email").value;
var password = document.getElementById("password").value;

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function() 
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("ErrorMessage").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","checklogin.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("email=" + email + "&password=" + password);
}

</script>

checklogin.php

<?php

session_start();

//Login Script



//Variables
$email = $_REQUEST['email'];
$userPassword = $_REQUEST['password'];
//$keeploggedin = $_REQUEST['keeploggedin'];



require_once("dbdetails.php");

// Create Mysqli object
$db = new mysqli($hostname, $username, $password, $database);

// Create statement object
$stmt = $db->stmt_init();

// Create a prepared statement
if($result = $stmt->prepare("SELECT u.UserFirstName, u.UserSurname, u.UserID FROM user u WHERE u.UserEmail = ? AND u.UserPassword = ?")) {

    // Bind your variables to replace the ?s
    $stmt->bind_param('ss', $email, $userPassword) or die(errorCodes($stmt->errno));

    //$row -> fetch_array(MYSQLI_ASSOC);

    // Execute query
    $stmt->execute() or die(errorCodes($stmt->errno));

    $stmt->bind_result($fname, $sname, $userID);

    $stmt->store_result();

    $count = $stmt->num_rows;

    if($count == 1){
        while($row = $stmt->fetch()) {

            // Register $email, $password, $firstname, $surname, create logged_in session and redirect to file "projects.php"
            $_SESSION['email'] = $email;
            $_SESSION['password'] = $userPassword;
            $_SESSION['firstname'] = $fname;
            $_SESSION['surname'] = $sname;
            $_SESSION['userID'] = $userID;
            $_SESSION['LoggedIn'] = 'true';
            $_SESSION['loginCount'] = 0;
            header("location:projects.php");
        }
    }
    else {
        //$_SESSION['loginCount'] += 1;
        //header("location:loginPage.php");
        //echo("<script type='text/javascript'>\n");
        //echo("changeError();\n");
        //echo("</script>");    

        echo("Username and Password mismatch, please try again");
    }

    // Close statement object
    $stmt->close();
}


    function errorCodes($aErrorCode)    {
        echo("Error " . $aErrorCode . " has occured");
    }


?>

score 0 · Accepted Answer

ログインが成功すると、(php から) ログインが成功したことを示す json データを返し、このコードを変更します。

xmlhttp.onreadystatechange=function() 
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("ErrorMessage").innerHTML=xmlhttp.responseText;
    }
  }

successPHP から応答があった場合に、ユーザーを次のページにリダイレクトします。

score 0 · Accepted Answer

テストできますxmlhttp.responseText：

  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       if(xmlhttp.responseText != "")    //If not, it completes your error box
          document.getElementById("ErrorMessage").innerHTML=xmlhttp.responseText;
       //Else, let the redirection trigger

    }

score 0 · Accepted Answer

単純なajaxで、それが役立つことを願っています:)

<script>
function processlogin()
{
$.ajax(
{
url:'checklogin.php',
type:'POST',
data:{'email':email,'password':password},
success:function(xyz)
{
if(xyz==1)
{
$("#errormessage").load("ajax/newcontent.php");
}
else{
//do something as you need
}
}
});
}
</script>

in the checklogin.php page, if the IF condition success then 'echo 1' or 'echo 0' in else part.so that you can validate using these values in success block of the ajax script.

php - ページ内の AJAX 読み込みページ

3 に答える 3

Related

Reference