jQuery AJAX method returns current page - php

Question

First, let me say that I've looked through other similar questions on this site and the jQuery documentation. So far I haven't found something that fixes my issue.
I'm trying to setup a login form for logging in using an email address and password. I have a PHP-only solution that works just fine, but I'm trying to add AJAX functionality as well.
The code I'm using now returns the whole page that's making the AJAX call. Just for some extra info, I'm using jQuery 1.10.2 and PHP 5.4.12. This is also my first time setting up a site to use a PHP script for deciding what other scripts to use based on what data is sent to it, so please bear with me.
Here's my form:
<form id="employee_login" name="employee_login" action="portal.php" method="post">
<input type="text" name="email" placeholder="Email address">
<input type="password" name="password" placeholder="Password">
<button id="login" type="submit" name="submit">Submit</button>
</form>
<div id="error_box">
<?php if(isset($GLOBALS['loginError']) && $GLOBALS['loginError'] != '') { ?>
<p class="error"><?php echo $GLOBALS['loginError']; ?></p>
<?php } ?>
</div>
Here's my AJAX function:
function ajaxValidate(email, pass, error) {
if($(email).val() == '' || $(pass).val() == '') {
$(error).html('<p class="error">You must enter your email address and password!</p>');
}
else {
$.ajax({
type: 'POST',
url: '/php-modules/ajax_filter.php',
dataType: 'text',
data: { emailAddr: $(email).val(), password: $(pass).val()},
success: function(text, textStatus, jqXHR)
{
console.log(Date() + ': ' + text);
try{
if( IsType(text, 'json') ) {
var ajaxData = $.parseJSON(text);
if(ajaxData['error'] != null && ajaxData['error'] != 'undefined')
$(error).html('<p class="error">' + ajaxData['error'] + '</p>');
else if(ajaxData['is_email'] != 1)
$(error).html('<p class="error">You must enter a <strong>VALID</strong> email address.</p>');
else if(ajaxData['is_email'] == 1)
document.location = jqXHR.getResponseHeader('Location');
else
$(error).html('<p class="error">You must enter your email address and password!</p>');
}
else if( IsType(text, 'html') ) $(error).html( $.parseHTML(text) );
else if( IsType(text, 'xml') ) alert('Data is XML.');
}
catch(e) {
$(error).html('<p class="error">' + e.description + '</p>');
console.debug(e);
}
},
error: function(jqXHR, textStatus, errorThrown)
{
$(error).html('<p class="error">' + jqXHR.status + ' ' + errorThrown + ' ' + jqXHR.responseText + '</p>');
}
});
}
}
The script I'm sending the AJAX call to is only setup for 1 request so far. I intend to add more later. I'm not sure if I've setup too many checks either, but I wanted to be safe since I'm not very familiar with something like this. And the "unidentified error" thing I added just today was a replacement for a "return false" that I thought could've been causing the problem. Here's the code:
<?php
// a filter for all AJAX requests
// for email checking
if( isset($_POST['emailAddr']) ) {
require_once('login.php');
if(isset($GLOBALS['loginError']) && $GLOBALS['loginError'] != '') {
echo '{"error":"' . $GLOBALS['loginError'] . '"}';
} else echo '{"error":"Unidentified error"}';
}
// if $_POST isn't set, isn't an array, or has a length less than 1, return an error
else if(!isset($_POST) || !is_array($_POST) || count($_POST) < 1) {
echo '{"error":"No data sent"}';
}
// if the previous check fails, invalid or insuficient data was sent
else {
echo '{"error":"Could not process request"}';
}
?>
The last piece is my login checking script. I've omitted the actual query and table fields because those parts work fine when using my PHP-only solution.
<?php
if($_SERVER['REQUEST_METHOD'] == "POST") {
// halt execution if the login fields are empty
if((!isset($_POST['emailAddr']) || $_POST['emailAddr'] == "") && (!isset($_POST['password']) || $_POST['password'] == "")) {
$GLOBALS['loginError'] = 'You must enter your email and password!';
}
else {// check for valid email
require_once('is_email.php');
if( !is_email($_POST['emailAddr']) ) $GLOBALS['loginError'] = 'You must enter a valid email address!';
else if($_POST['emailAddr'] != "" && $_POST['password'] != "") {
try{
// PDO setup
include('pdo.php');
$con = createPDO();
// PDO statement preparation and execution
$query = $con->prepare("[query code];");
$email = $_POST['emailAddr'];
$password = $_POST['password'];
// returned PDO query data
if($query->execute( array($email) ) ) {
while($row = $query->fetch(PDO::FETCH_ASSOC)) {
if(strtolower($email) == strtolower($row['email']) && $password == $row['password']) {
// set session data
$_SESSION['user_id'] = $row['[id field]'];
$_SESSION['name'] = ucfirst($row['[name field]']);
$_SESSION['email'] = $row['[email field]'];
session_regenerate_id();
header("location: /");
}
else $GLOBALS['loginError'] = 'ID or password incorrect!';
}
}
} catch(Exception $e) {
$GLOBALS['loginError'] = $e->getMessage();
}
}
else $GLOBALS['loginError'] = 'You must enter your email and password!';
}
}
?>
I've cut out an unnecessary function and return false; lines, added the console.log(); method, changed the email: value name in the ajax data: option to emailAddr: (in my PHP code too) in case of a name conflict between it and my email variable, and changed my code to parse for HTML in case of PHP generating HTML error messages. My parentheses, braces, and brackets seem to be matched ok (I checked using Sublime Text's parenthesis/brace/bracket highlighting to check), the form checking portion of the script works fine.
I'm honestly at a loss...
Also, thanks to everyone who reads through this long-winded post.
Question updates:
I just realized that parsing code in the try is working correctly. Since the $.parseJSON doesn't work, it's skipping down to the if statement for parsing HTML and that one is working.
Code changes:
I replaced some return statements with echo, per Morganster.

Answer 1

When you are going to return data across an ajax call, you must print your data.
For example,
$var['error']="Could not process request";
echo json_encode($var);

Answer 2

The problem is fixed. Someone named Scott Sawyer said header("Location: /") would cause the $.ajax() method to return the whole current page. The redirect seems to be working now. Thanks for the input everyone.