JSON setting up in php and js - php

Question

I know I had already this question asked, but I'm doing something wrong in my code. I know that I need to use JSON, and after going through few pages I understand the theory, but somehow can't make it work here is my code once again (btw I know about my security issues and I'll work on them as soon as I solve my technical issues with JSON):
$(document).on('pageinit',function(){
$("#login").click(function(){
username=$("#usr").val();
password=$("#psw").val();
$.ajax({
type: "POST",
url: "http://imes.**********.com/php/login_check.php",
data: "name="+username+"&pwd="+password,
success: function(html){
//in case of success
if(html=='true')
{
var usr = console.log(data.usr);
var psw = console.log(data.psw);
$.cookie('usr', usr);
$.cookie('psw', psw);
$("#login_message").html("Logged in, congratulation.");
$.mobile.changePage("http://imes.**********.com/userpanel.php");
}
//in case of error
else
{
$("#login_message").html("Wrong username or password");
}
},
beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner
complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner
});
return false;
});
And my php:
<?php
session_start();
$username = $_POST['name'];
$password = $_POST['pwd'];
include('mysql_connection.php');
mysql_select_db("jzperson_imesUsers", $con);
$res1 = mysql_query("SELECT * FROM temp_login WHERE username='$username' AND password='$password'");
$num_row = mysql_num_rows($res1);
$res2 = mysql_fetch_array($res1);
if( $num_row == 1 ) {
$arr = array('usr' => $username, 'psw' => $password);
echo json_encode($arr);
echo 'true';
}
else{
echo 'false';
}
?>

Answer 1

Your out put is not valid json, echoing a true or false after the json will cause it to be invalid. You have to insert the success message into the json data.
if( $num_row == 1 ) {
$arr = array('usr' => $username, 'psw' => $password);
echo json_encode(array('data'=>$arr, 'success'=>true);
//echo 'true';
}
else{
echo json_encode(array('success'=>false);
}
then check in your ajax success callback
success: function(json){
//in case of success
if(json.success){
var usr = json.data.usr;
...
}
else{
...
}
Also you should pass your parameters to data as an object so it will be properly encoded.
data: {"name":username,"pwd":password},

Answer 2

Here's what I would do (PHP). First setup your response array, default to success FALSE.
$arr = array('success' => FALSE);
Then your condition overwrites if successful:
if( $num_row == 1 )
{
$arr = array('success' => TRUE, 'usr' => $username, 'psw' => $password);
}
Finally at the end of the script return the result as JSON encoded data.
echo json_encode($arr);
exit();
I would make the following change to your jQuery also:
$.ajax({
type: "POST",
url: "http://imes.**********.com/php/login_check.php",
data: "name="+username+"&pwd="+password,
dataType: 'json', // let's it know the response will be JSON formatted
success: function(json){
if (json.success === true){
// do whatever you want here
}
});
A bit of advice though: you should never pass a user's password to the front-end.There is no need for it, ever.

Answer 3

If it helps, JSON is basically the right-hande-side of a variable definition in JS:
var myvar = ....;
^^^^---- basically JSON
Since you're doing
echo json_encode($var);
echo 'true';
in your PHP code, consider how it'll look from the client side:
var myvar = 'somestring'true;
^^^^---syntax error
if you're outputting JSON for consumption by an AJAX call in your JS code, then the JSON text is the ONLY thing that can be output by the server as its response. Anything else will simply mangle the json string somehow, and make it invalid.