PHP Ajax Form Integration return arrays - php

Question

Using PHP and jQuery Ajax to build a basic log in system.
What I want to do is submit sections of a form via ajax and return an array. I'm not quite sure if I've got this one right.
Here is the PHP
if($access_function == 'access_login_1'){
$email = $_POST['access_email'];
$pwd = $_POST['access_pwd'];
if(!$email || !$pwd){
$error = 'Empty';
}
else {
$user = get_user($email);
if($user && $user['pwd'] == $pwd){
if($user['status'] == 1){
$action = 1;
}
else {
$order = 'Unauthorised';
}
}
else {
$error = 'invalid';
}
}
return array('action'=>$action,'error'=>$error,'order'=>$order);
}
The get_user function is like this::
function get_user($email){
global $cnx;
$q = $cnx->prepare("SELECT email FROM `users` WHERE email = :email");
$q->execute(array(':email' => $email));
return $q->fetch();
}
Now the jQuery is the real struggle. What I want is to submit the serialised values to this php. If the script returns an action of 1, I want to perform another script, I want $error to go into a div called error and order into a div called $order
This hasn't worked:
function sendvars(container,linkrul,perform){
var vars = 'access=1';
$(container).find('input').each(function(){
vars += '&' + $(this).attr('name') + '=' + $(this).val();
});
$.ajax({type:'POST',url:linkrul,data:vars,success:function(results){
if(results == 1){ }
else { $(container).find('.orders').html(results).slideDown(300); }
}
});
}
-- Hashing is off for not just while we test everything.

Answer 1

I would do it returning json encoded arrays:
if($access_function == 'access_login_1'){
$email = $_POST['access_email'];
$pwd = $_POST['access_pwd'];
if(!$email || !$pwd){
$resp = array(
'action' => $someValue,
'order' => $someValue,
'error' => 'No Email or password provided'
);
}
else {
$user = get_user($email);
if($user && $user['pwd'] == $pwd){
if($user['status'] == 1){
$resp = array(
'action' => 1,
'order' => $someValue,
'error' => 'No Error'
);
}
else{
$resp = array(
'action' => $someValue,
'order' => 'Unauthorised',
'error' => 'Order Error'
);
}
}
else {
$resp = array(
'action' => $someValue,
'order' => 'Unauthorised',
'error' => 'Invalid'
);
}
}
echo json_encode($resp);
}
And in js:
function sendvars(container,linkrul,perform){
var vars = 'access=1';
$(container).find('input').each(function(){
vars += '&' + $(this).attr('name') + '=' + $(this).val();
});
$.ajax({type:'POST',url:linkrul,data:vars,dataType:'JSON',success:function(results){
if(results.action == 1){
//do something
}else if(results.action == someOtherValue){
$(container).find('.orders').html(results.order).slideDown(300);
}else{
alert(results.error); //Or put the error in some div
}
//any other code or if/else statement
});
}

Answer 2

You need to think more carefully about what data is being sent from the PHP to the AJAX callback:
Remember that a PHP script cannot "return" anything, it simply "displays" it. So return array('action'=>$action,'error'=>$error,'order'=>$order); will not produce any output that the Javascript can read unless you then serialize it (turn it into a string and output it) in some way, such as XML or JSON (using json_encode()). You can test that the script is outputting something useful by looking at it directly in your browser, or using debug tools such as Firebug.
jQuery needs to know what encoding you've output your data in (see documentation on the dataType parameter). If it's XML, it will pass the whole XML document to your callback function, so you would need to use functions like .find and .each to inspect it. Probably the easiest is for your PHP to use header('Content-type: application/json'); (which tells jQuery you're using JSON) and echo some data using json_encode, so that your Javascript callback gets a simple Javascript object to work with.
Your current Javascript assumes that the result of the AJAX call is either an integer (result == 1) or a blob of HTML .html(results). A better approach would be to pass back the whole result structure shown in your PHP code (i.e. echo json_encode(array('action'=>$action,'error'=>$error,'order'=>$order));). Then you can check and act on each part of the structure separately (e.g. response.action == 1, .html(response.order)), and your code becomes more readable and more flexible for future situations.
Finally, jQuery has some built-in functions which can do some more of your work for you here: check out $.post as a short-hand for the AJAX call, and .serialize() (or its cousin .serializeArray()) for reading out the current values of form elements in a form you can send to the AJAX callback.
(Incidentally, I'm sure you'd have spotted this, but I presume linkrul should be linkurl)

Answer 3

This is also one option.
HTML
<input type='text' class='email' />
<input type='password' class='pass' />
PHP - checkLogin.php
<?php
$action = 0;
$order = 0;
$error = 0;
if(isset($_POST['email'], $_POST['pass'])) {
if(!empty($_POST['email']) && !empty($_POST['pass'])) {
$user = get_user($email);
if($user && $user['pwd'] == $_POST['pass']){
if($user['status'] == 1){
$action = 1;
} else {
$order = 'Unauthorised';
}
} else {
$error = 'invalid';
}
} else {
$error = "Empty";
}
$array = array('action'=>$action,'error'=>$error,'order'=>$order);
echo json_encode($array);
}
Javascript
function checkLogin(){
var email = $('.email').val();
var pass = $('.pass').val();
$.post('checkLogin.php', {email:email,pass:pass}, function(response) {
var result = $.parseJSON(response);
if(response['action'] == 1) {
//authorized
} else if(response['order'] == 'Unauthorised') {
//unauthorized
} else {
//error
}
});
}