Question

I’d like to pass content back and forth from PHP to jQuery and vice versa. I’m not sure if I fully understand the best way to go about this and am hoping for some best advice and clarification.

Below is an example of something I’m trying to do. The PHP lists the files in a directory (whose path is passed to it from jQuery), stores them in an array, then passes them back to jQuery. I’d like to use the values in that array for various purposes but really I just want to understand passing information back and forth between the two, wether it’s from an array, or just a plain variable. Merci beaucoup!

The PHP:

$files = array();
$dir = ($_POST['dir']);
$count = 0;

if ($handle = opendir($dir)) {
    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != ".." && strpos($file, '.jpg',1)) {$count++;
            $files[$file] = $file;
        }
    }
    closedir($handle);
}
    echo json_encode($files);
?>

The jQuery:

$(document).ready(function(){

    $('a').click( function(e) {
        e.preventDefault();

        $.post("php.php", 'path/to/directory/',
            function(data) {
                alert(data);
        }, "json");
    });

});

Answer 1

If I read your question correctly, you’re not really looking for tips on this specific code, but more for comments about the process of transferring data back and forth between PHP and jQuery. Let’s look briefly at JSON itself, and then look at each side of the communication.

JSON

JSON is a simple way of representing collections of data in a string format that is pretty easy for both humans and computers to read. You can get the full description at http://www.json.org/ but it basically boils down to:

• data is enclosed by { and } characters
• data is in the format string : value, where the string acts as a reference label
• string is in the format of ", followed by any unicode char except / or ", followed by another quote
• value can be another string, a number, a complete data object, a boolean value, or an array of some set of the above values
• an array is of the format [, followed by a comma separated list of values, followed by a ]

PHP

On the php side, you are receiving a page request and using the attached parameters to decide how to process the page. For a JSON app, that means loading the data into an array, and then the json_encode() function does the grunt work for converting that array into JSON format. The rest of the app would work just the same if you manually created the JSON as a string, though obviously this would make for a lot more work in the PHP code for you. Hence the helper function 🙂

jQuery

On the jQuery side, the call to $.post() issues an AJAX request, to retrieve a page from the server. In this case, you are sending a request to php.php.

The second set of parameters in the $.post() call is a collection of parameters, which should consist of { followed by comma-separated sets of: a label, then a colon, then a value. Once you have specified all parameters, close the collection with a }. Note that though this is similar to a JSON string, it is not JSON. The label does not have quotes around it the way JSON requires. Any string values, however, do need quotes.

The third parameter of the $.post() call is a function that will be automatically applied to the data that is received from the page request. The results of the function are automatically loaded into whatever variable you specify in the function definition, and you are able to use that data within the function, pretty much as you please. In your example, you simply sent the data to an alert box, but you can do much more with it. You could actually parse this as a JSON collection and perform various actions based on the contents of individual components from within the JSON (which, ultimately, means that you are directly acting on individual values from the original php array).

The fourth parameter on the $.post() call is the data-type. It isn’t required, however using it is required if you want to access the json collection as more than just a string. With it, you can specify that the type of data you are returning is json, by simply including "json". If you have done this, you can access the elements of the JSON collection directly within the third parameter function, by referencing their label.

Here’s an example of a complete JSON $.post() call:

$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); //pretend it's John
     console.log(data.time); //pretend it's 10:05am
   }, "json");

So here, an ajax request is sent to test.php with the parameter func="getNameAndTime" which the php uses to determine that it should return a json-encoded collection of the form {"name":"John", "time":"10:05am"}, and then the response reaches the function specified to first alert() with the value "John" and then log "10:05am". Again, the only reason that data.name and data.time works in this function is because we specified that json was the return type in the fourth parameter.