ajax post call does not return any json response to jquery

Question

I am facing issue with ajax post type call. I get blank php json response when an ajax call is invoked from jquery.

Below are the html, jquery and php code which i am using in-order to send HTML form data and get the json response.Please advice if there is any issue with the code or if it has got to do something with the browser settings.

i am using jQuery src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js". Also using FirePHP addon, i am able to see the form inputs are correctly sent to php.

 HTML Code
 =========

  <form id = "frmLogin" action ="" autocomplete="off" style="width:10em;margin:0 auto" method="post">
   User Email ID : <input type = "email" name ="loginId" autocomplete = "off">              
  Password    : <input type = "password" name = "password" autocomplete = "off"> 
  <input id= "clkLogin" type="Submit" value="Submit" >  
  </form>

JQuery Code
===========
$("#frmLogin").submit(function() {
    $.ajaxSetup( { cache: false });      
    $.ajax( {     
        url: "http://localhost/validateUser.php" , 
        cache:false, 
        type:"POST",
        async:true, 
        data: $("form#frmLogin").serialize(),
        success:function(data){
                    $("#loginPage").hide();
                    $("#Registered").hide(); 
                    $("#userHomePage").show();
                                     $("button#user").html(data.firstName);     
            }, dataType:"json" 
           });
         return false;  
        });

 PHP Code
 ========

 <?php
 require_once('FirePHPCore/fb.php');

 $con = mysqli_connect("localhost","root","kpns@123","spa");

 if(mysqli_connect_errno()) {
echo "MYSQL connection error ::" . mysqli_connect_error();
 }

 $sql = "select * from spausers where email_id = '$_POST[loginId]' and pswd ='$_POST[password]' "; 

 fb($sql,'SQL Query'); // FirePHP console log shows sql statement with  the correct inputs sent from HTML form

 $result = mysqli_query($con,$sql);

 fb($result,'mysqli_query result');

 while ($row = mysqli_fetch_array($result)) {
 $data =    array ('emailid'=>$row['email_id'],'firstName' => $row['first_name'],'lastName' => $row['last_name']);  

 fb(json_encode($data),'mysqli_query fetch array'); // FirePHP console log shows result in json format {"key" : "value", "key":"value"}  
 }
 header("Content-Type: application/json");

 echo json_encode($data);
mysqli_close($con);
 ?>

Request Header

Accept * / *

Accept-Encoding gzip, deflate

Accept-Language en-US,en;q=0.5

Content-Length 52

Content-Type application/x-www-form-urlencoded; charset=UTF-8

Host localhost

Origin null

User-Agent Mozilla/5.0 (Windows NT 6.2; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0

Response Header

Connection Keep-Alive

Content-Length 85

Content-Type application/json

Date Sun, 06 Oct 2013 04:48:54 GMT

Keep-Alive timeout=5, max=100

Server Apache/2.2.25 (Win32) PHP/5.3.27

X-Powered-By PHP/5.3.27

Answer 1

Hope can help you

JQuery Code

$("#frmLogin").submit(function() {

    // setup some local variables
    var $form = $(this);
    // Serialize the data in the form
    var serializedData = $form.serialize();
    $.ajaxSetup( { cache: false });      
    $.ajax( {  
        cache:false, 
        type:"POST",
        async:true, 
        dataType: "json",
        url: "http://localhost/validateUser.php",
        data: serializedData,
        success:function(data){
                $("#loginPage").hide();
                $("#Registered").hide(); 
                $("#userHomePage").show();
                $("button#user").html(data.firstName);     
        }
       });
     return false;  
    });