title: Passing data back from php to ajax
body: <p>How can I pass data from a php of then rows back to ajax ?</p>
  
  <p>PHP</p>
  
  <pre><code>$query = 'SELECT * FROM picture order by rand() LIMIT 10';
  $result = mysql_query($query);
  
  while ($rec = mysql_fetch_array($result,  MYSQL_ASSOC)) {
  
  $url[]=$rec['pic_location'];
  $name[]=$rec['name'];
  $age[]=$rec['age'];
  $gender[]=$rec['gender'];
  
  
  }
  
  echo json_encode($url);
  echo json_encode($name);
  echo json_encode($age);
  echo json_encode($gender);
  </code></pre>
  
  <p>Ajax</p>
  
  <pre><code>$(".goButton").click(function() {
     var dir =  $(this).attr("id");
     var imId = $(".theImage").attr("id");
  
     $.ajax({
        url: "viewnew.php",
        dataType: "json",
        data: {
           current_image: imId,
           direction    : dir
        },
        success: function(ret){
            console.log(ret);
            var arr = ret;
            alert("first image url: " + arr[0][0] + ", second image url: " + arr[0][1]);  // This code isnt working
            alert("first image Name: " + arr[1][0] + ", second image name: " + arr[1][1]);
            $(".theImage").attr("src", arr[0]);
            if ('prev' == dir) {
              imId ++;
           } else {
              imId --;
           }
           $("#theImage").attr("id", imId);
        }
     });
  
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My question is how can I display the values here ? The Alert message is giving me "Undefined" ?</p>