best option to get php array variable in Javascript produced by php script that requested through an ajax call

Question

Currently I am trying to create a live search bar that only produce 5 results max and more option if there is over 5 results. So what I have done so far is a jquery ajax script to call a php script that runs asynchronously on key up in textbox I have.

I want to get the php array then I will code it further using javascript.

This is my code now:

Javascript code
<script type="text/javascript">
    function find(value)
    {
    $( "#test" ).empty();
    $.ajax({
    url: 'searchDb.php',
    type: 'POST',
    data: {"asyn": value},
    success: function(data) {
    return $lala;
    var lala = $lala;
    $( "#test" ).html($lala);
    }
    });

    }
   </script>

SearchDb PHP code:

<?php

function searchDb($abc, $limit = null){

 if (isset($abc) && $abc) {

$sql = "SELECT testa FROM test WHERE testa LIKE '%$abc%'";


if($limit !== null){
$sql .= "LIMIT ". $limit;  

}

$result = mysql_query($sql) or die('Error, insert query failed') ;


$lists = array();
while ( $row = mysql_fetch_assoc($result))
{

  $var = "<div>".$row["testa"]."</div>";
array_push($lists, $var);
 }
 }
 return $lists;
 }

 $abc = $_POST['asyn'];
 $limit = 6;
 $lala = searchDb($abc);
 print_r($lala);

  ?>

How can I get $lala

Answer 1

Have you considered encoding the PHP array into JSON? So instead of just echoing the array $lala, do:

echo json_encode($lala); 

Then, on the Javascript side, you'll use jQuery to parse the json.

var jsonResponse = $.parseJSON(data);

Then you'll be able to use this jsonResponse variable to access the data returned.

Answer 2

You need to read jQuery .ajax and also you must view this answer it's very important for you

$.ajax({
  url: 'searchDb.php',
  cache: false,
  type: 'post'
})
  .done(function(html) {
    $("#yourClass").append(html);
  });

In your searchDb.php use echo and try this code:

    function searchDb($str, $limit = null){
      $lists = array();
      if (isset($str) && !empty($data)) {
        $sql = "SELECT testa FROM test WHERE testa LIKE '%$data%'";
        if(0 < $limit){
          $sql .= "LIMIT ". $limit;  
        }
      $result = mysql_query($sql) or die('Error, insert query failed') ;
      while ( $row = mysql_fetch_assoc($result))
      {
         $lists[] = "<div>".$row["testa"]."</div>";
      }
   }
   return implode('', $lists);
   }

     $limit = 6;
     $data = searchDb($_POST['asyn'], $limit);
     echo $data;
 ?>

Answer 3

If you dont have or your page searchDb.php dont throw any error, then you just need to echo $lala; and you will get result in success part of your ajax function

ALso in your ajax funciton you have

    //you are using data here
   success: function(data) {
return $lala;
var lala = $lala;
$( "#test" ).html($lala);
}

you must try some thing like this

  success: function(data) {
var lala = data;
$( "#test" ).html($lala);
}