Returning JSON data from the PHP file using jQuery

advertisements

Long time reader, first time poster. I'm very new to the world of jQuery and JSON and have been seeing an issue with a login script I'm running.

The end goal is to capture data from a form, pass that data to a PHP file for processing via jQuery.ajax() post, compare the data against a MySQL database for authentication and return a data for either a success of failure.

My problem is that I cannot get the JSON formatted data to be passed from the PHP script back to the jQuery. When viewing the processing with Chrome's Developer Tools, I see that 'Login Failure'. I've double checked the array $rows by throwing it to my error_log file and it returns properly formatted JSON, but I just can't for the life of me get it to return to the jQuery file. Any help is appreciated.

My form input:

<!-- BEGIN: Login Page -->
    <section data-role="page" id="login">
        <header data-role="header" data-theme="b">
            <a href="#landing" class="ui-btn-left">Back</a>
        <h1>Please Log In</h1>
        </header>
        <div data-role="content" class="content" data-theme="b">
            <form id="loginForm" action="services.php" method="post">
                <div data-role="fieldcontain">
                    <label for="schoolID">School ID</label>
                    <input type="text" name="schoolID" id="schoolID" value=""  />

                    <label for="userName">Username</label>
                    <input type="text" name="userName" id="userName" value=""  />

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

                    <h3 id="notification"></h3>
                    <button data-theme="b" id="submit" type="submit">Submit</button>
            <input type="hidden" name="action" value="loginForm" id="action">
                </div>
            </form>
        </div>
        <footer data-role="footer" data-position="fixed" data-theme="b">
            <h1>Footer</h1>
        </div>
    </section>
    <!-- END: Login Page -->

My jQuery Handler:

// Listen for the the submit button is clicked, serialize the data and send it off
    $('#submit').click(function(){
        var data = $("#loginForm :input").serializeArray();
    var url = $("#loginForm").attr('action');

    $.ajax({
        type: 'POST',
        url: url,
        cache: false,
        data: data,
        dataType: 'json',
            success: function(data){
            $.ajax({
                type: 'GET',
                url: "services.php",
                success: function(json){
                alert(json);
                $('#notification').append(json);
                }
            });
            }
        });
    });

And here is my PHP processing:

if (isset($_POST['action'])) {
    $schoolID = $_POST['schoolID'];
    $userName = $_POST['userName'];
    $password = $_POST['password'];

    $sql = "SELECT FirstName, LastName, FamilyID, StudentID, UserID ";
    $sql .= "FROM Users ";
    $sql .= "WHERE SchoolID = '$schoolID' ";
    $sql .= "AND Username = '$userName' ";
    $sql .= "AND Password = '$password'";
    $rs = mysql_query($sql);

    $rows = array();
    while($row = mysql_fetch_array($rs, MYSQL_ASSOC)) {
        $row_array['firstName'] = $row['FirstName'];
        $row_array['lastName'] = $row['LastName'];
        $row_array['familyID'] = $row['FamilyID'];
        $row_array['studentID'] = $row['StudentID'];
        $row_array['userID'] = $row['UserID'];
        array_push($rows, $row_array);
    }

    header("Content-type: application/json", true);
    echo json_encode(array('rows'=>$rows));
    exit;

    }else{

    echo "Login Failure";
    }


Look what mistake you are making here it is very simple

 $.ajax({
    type: 'POST',
    url: 'services.php',
    cache: false,
    data: $('#loginForm').serialize(),
    dataType: 'json',
        success: function(data){
            alert(data);
            $('#notification').append(data);
        }
    });
});

Use serialize function of jquery. And when you have a parameter in success function it is not that 'data' you have in this instruction

data : data,

It is returned from php end it is new data returned on success. To avoid confliction use some thing else like new_data

    success: function(new_data){
        alert(new_data);
        $('#notification').append(new_data);
    }

New data is in json format check it. Use console.log to see in firebug if you are using firefox.

    success: function(new_data){
        console.log(new_data);
        alert(new_data);
        $('#notification').append(new_data);
    }