PHP and AJAX login form

Question

Hello I know this subject has been proposed before, but no one has done the AJAX manipulation standard like i did. I'm newbie to AJAX and jQuery

The problem I have here is that I'm not sure that the js function "ajaxPostCallManip()" reaches to "login.php"!!

I've made a couple of alert()s but nothing appears...Please help

HTML CODE

    <link rel="stylesheet" type="text/css" href="jQuery-Files/jquery.mobile-1.3.1.css"/>
    <script type="text/javascript" src="jQuery-Files/jquery-2.0.2.js"></script>
    <script type="text/javascript" src="jQuery-Files/jquery.mobile-1.3.1.js"></script>
    <script type="text/javascript" src="js/ajax.js"></script>

<div data-role="page" id="loginDialog">
    <header data-role="header">
        <h3 style="margin-left: auto; margin-right: auto;">Login or <a href="#regpage"      
            data-transition="flip">Register</a></h3>
    </header>
    <div data-role="content">
        <form method="POST" action="" onsubmit="check_login(); return false;">
             <fieldset data-role="contolgroup">                            
                  <div data-role="fieldcontain">                    
                       <label for="login_username">Username</label>
                       <input type="text" name="login_username" id="login_username" 
                              placeholder="username" />

                       <label for="login_pwd">Password</label>
                       <input type="password" name="login_pwd" id="login_pwd" 
                              placeholder="password" />

                       <div style="margin: auto; text-align: center;">
                           <label for="login_submit" class="ui-hidden-accessible">                 
                                  Submit</label>
                           <button onclick="this.form.submit()" value="Submit" 
                                   data-inline="true"></button> 
                           <span class="error" id="login_err" name="login_err" 
                                 style="display: none; font-size: 12px; 
                                 text-align: center;">status</span>
                       </div>                
                  </div>
             </fieldset>
        </form>
    </div>
</div>

js CODE

// AJAX Call handler using method="POST"
    function ajaxPostCallManip( str, url, toDoFunc )
    {   
        var xmlhttp;                // Request variable
        if( window.XMLHttpRequest )         // For modern browsers
        xmlhttp = new XMLHttpRequest;
        else                    // For old browsers
        xmlhttp = new ActiveXOBject("Microsoft.XMLHttp");

        xmlhttp.onreadystatechange=toDoFunc;
        xmlhttp.open("POST", url, true);
        xmlhttp.send(str);
    }

    function check_login()
    {
        // Construct the POST variables [username, password]
        var postStr = "username=" + $('#login_username').val() + "&" 
            + "password=" + $('#login_pwd').val();

        // Call the general purpose AJAX Handler Function
        ajaxPostCallManip(postStr, "login.php", function()  
        // toDoFunc to be performed when server response is ready
        {
        if( xmlhttp.readyState == 4 && xmlhttp.status == 200 )
        {   
            alert(xmlhttp.responseText);        
            switch(xmlhttp.responseText)
            {
                case "1":
                $('#login_err').css({'color':'green','display':'block'})
                                       .html('Successful Login');                   
                break;

            case "2":
                    $('#login_err').css({'color':'red','display':'block'})
                                       .html('incorrect username/password')
                break;

            case "3":
                $('#login_err').css({'color':'red','display':'block'})
                                       .html('please fill in all fields')
                break;
            }
        }
        });
    }

PHP CODE

<?php
    include('dbManip.php');

    echo '<script> alert("Inside login.php"); </script>';

    $username = $_POST['username'];
    $password = $_POST['password'];

    // Just to check that the POST variables arrived safely
    echo "<script> alert('username = ' + $username); </script>";    


    if(!empty($username) && !empty($password))
    {
        // Fetch data from database
        $query = "
            SELECT username,password
            FROM users
            WHERE username = '$username' and password = '$password';
        ";  

        // Execute query
        $res = mysql_query($query);

        // If there is a match for the credentials entered with the database
        if(mysql_num_rows($res) == 1)
        {
            // Fetch information and double check credentials
            while($row = mysql_fetch_assoc($res))
            {
                $db_username = $row['username'];
                $db_password = $row['password'];
            }

            // Compare results with user input
            if( $username == $db_username && $password == $db_password)
            {
                // Credentials are correct - response = 1
                echo '1';
            }
            else 
            {
                // Credentials are incorrect - response = 2
                echo '2';
            }
        }
        else
        {
            // There is no match in the database
            // Credentials are incorrect - response = 2
            echo '2';
        }
    }   
    else 
    {
        // If one or both fields are empty - response = 3
        echo '3';
    }
?>

Answer 1

First, you need to rewrite the submit button:

<button type="Submit" value="Submit"data-inline="true"></button> 

Second, move the variable from a function that would make it a global:

    var xmlhttp;      // Request variable 
    function ajaxPostCallManip( str, url, toDoFunc )
    {   
        if( window.XMLHttpRequest )         // For modern browsers
        xmlhttp = new XMLHttpRequest;
        else                    // For old browsers
        xmlhttp = new ActiveXOBject("Microsoft.XMLHttp");

        xmlhttp.onreadystatechange=toDoFunc;
        xmlhttp.open("POST", url, true);
        xmlhttp.send(str);
    }

Answer 2

I think you need to rewrite this line of code:

<form method="POST" action="" onsubmit="check_login(); return false;">

And change it to:

<form method="POST" action="login.php" onsubmit="check_login(); return false;">

Make sure to save login.php in the same folder as your html file.

Answer 3

从form标记中删除method="post"和action=""属性，因为您是在ajax调用中定义它的

Answer 4

<button type="Submit" value="Submit"

var xmlhttp;      // Request variable 
    function ajaxPostCallManip( str, url, toDoFunc )
    {   
        if( window.XMLHttpRequest )         // For modern browsers
        xmlhttp = new XMLHttpRequest;
        else                    // For old browsers
        xmlhttp = new ActiveXOBject("Microsoft.XMLHttp");

        xmlhttp.onreadystatechange=toDoFunc;
        xmlhttp.open("POST", url, true);
        xmlhttp.send(str);
    }