jquery ajax response from variable from a target file

Question

Hi,

I am sending username and password to some target file (auth.php) using jquery ajax. In auth.php file, i have many variables "var a1", "var b1".

If authentication success, the variable "a1" set to pass(a1='pass').

My problem is how to access the only the "a1" variable from "auth.php" using the ajax response.

small code is below:

$.ajax({
          url: "auth.php", 
          type: "POST",
          data: "dataString",
          success: function (txtBack) { 

           -- here i need to check the variable "a1" from auth.php
          }

Thanks in advance.

Answer 1

Your JS snippet...

$.ajax({
  url: "auth.php", 
  type: "POST",
  data: "dataString",
  dataType: "json",
  success: function (txtBack) { 
    // here i need to check the variable "a1" from auth.php
    alert(txtBack.a1);
  }
});

PHP Snippet...

echo json_encode(array('a1'=>'whatever'));

Answer 2

assuming your php returns JSON objects i.e. {'a1' : 100, 'a2' : 200}

your call back function would just access a1 via txtBack.a1

You can also use the PHP function json_encode() to convert an Associative Array to json then echo it out

your php script:

<?php
$arr = array ('a1'=>1,'a2'=>2,'a3'=>3);
echo json_encode($arr);
?>

Heres the manual for json_encode() http://php.net/manual/en/function.json-encode.php

And in case you're not familiar with JSON, check Wikipedia out: http://en.wikipedia.org/wiki/JSON

Answer 3

If you are returning an object you need to reference it.

txtBack.a1 or sometime I have seen txtBack.d.a1.

Though if you are returning an object like, and this is c#, this;

return new MyObject{ a1 = 10 };

then I think you need to do either txtBack.MyObject.a1 or txtBack.d.MyObject.a1

You might also consider returning the result as a JSON object.

Also use FireBug Firfox adding to see what is coming back.

Answer 4

You have to use jQuery + JSON combination something like this:

login.php:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>

<form action='auth.php' method='POST' class='ajaxform'>
 <input type='text' name='username' value='TestUsername'>
 <input type='password' name='password' value='TestPassword'>
 <input type='submit' value='submit'>
</form>

auth.php:

<?php
      if( $_POST['username'] and $_POST['password'] are authenticated ) {
         $arr = array( 'a1' => "Pass" );
      } else {
         $arr = array( 'a1' => "Fail" );
      }
      echo json_encode( $arr );
?>

jsFile.js:

jQuery(document).ready(function(){

    jQuery('.ajaxform').submit( function() {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            alert( data[id] ); // It will alert all json outputs
                        }
                      }
        });

        return false;
    });

});