Retrieve multiple variables from an AJAX call to jQuery

PHP Side

This is a very simple process, which you may kick yourself after grasping ;) But once you do, it opens a world of possibilities and your mind will go crazy with ideas.

The first stage is you want to adjust your data that you will be returning to the ajax call. If you have a few rows of a few fields, you would do have something along these lines (could come from db, or assignments, whatever):

$rows = [];
$rows[] = array('thing'=>'value 1','something'=>'blah','tertiary'=>'yup');
$rows[] = array('thing'=>'value 2','something'=>'yadda','tertiary'=>'no');
$rows[] = array('thing'=>'value 3','something'=>'woop','tertiary'=>'maybe');

Now, to get this rows of data out to ajax, you do this one simple operation:

echo json_encode($rows);
exit; // important to not spew ANY other html

Thats all you really need to do on the PHP side of things. So what did we do? Well, we took a multidimensional array of data (usually representing what comes from a database), and encoded it in JSON format and returned it. The above will look like this to your browser:

[{"thing":"value 1","something":"blah","tertiary":"yup"},
 {"thing":"value 2","something":"yadda","tertiary":"no"},
 {"thing":"value 3","something":"woop","tertiary":"maybe"}]

It will have handled all escaping, and encoding of utf8 and other special characters. The joys of json_encode()!

JAVASCRIPT Side

This side is not as difficult, but theres some things to understand. FIrst off, lets get your jquery ajax call into shape:

<div id="rows"></div>
<script>
$("#your-trigger").on('click',function(e){
    e.preventDefault(); // just stops the click from doing anything else
    $.ajax({
       type: "POST",
       url: 'your_ajax.php',
       data: { varname: 'value', numrows: '6' },// your sent $_POST vars
       success: function(obj) {
           // loop on the obj return rows
           for(var i = 0; i < obj.length; i++) {
               // build a div row and append to #rows container
               var row = $('<div></div>');
                   row.append('<span class="thing">'+ obj[i].thing +'</span>'); 
                   row.append('<span class="details">'+  
                                   obj[i].something +' '+ obj[i].tertiary
                               +'</span>');
               $("#rows").append(row);
           }
       },
       dataType: 'json' // important!
    });
});
</script>

So lets explain a few key points.

The most important is the dataType: 'json'. This tells your ajax call to EXPECT a json string to turn into an object. This object becomes what you define in the success function arg (which I named obj above).

Now, to access each specific data variable of each row, you treat it as an object. Array of rows, each row has vars named as you named them in PHP. This is where I have the for example to loop through the array of rows.

For example obj[0].thing refers to the first row of variable thing. The use of i lets you just go through all rows automatically based on length of the object. A few handy things in there.

You can build any html you wish from the returned object and values. I just showed how to setup a <div><span class="thing"></span><span class="details"></span></div> example row. You may want to use tables, or more complex setups and code.

To keep the return data from your ajax call, you can store it in a local or global variable like so:

<script>
var globalvar;
$....('click',function(e){
    var localvar;
    $.ajax(.... success: function(obj){
        ....
        localvar = obj;
        globalvar = obj;
        ....
    });
});
</script>