tags:

views:

105

answers:

2
+1  A: 

The code is correct except for this line in the jQuery:

        $.post("php.php", {dir: 'path/to/directory/'},

By the way, it looks like your request is idempotent, so consider using GET instead of POST.

Zarel
+2  A: 

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.

JGB146
Sidenote: You'll notice that the second parameter differs from the format in your code. That difference is where people are spotting a mistake. You need to specify both the parameter and the value from within a collection. And while it's not strictly required that the parameter name be in quotes, it doesn't hurt!
JGB146
I definitely wasn't expected such a detailed answer but that does explain it very well, thank you for taking the time to write it. I know my question seems a bit like I'm asking for others to explain what I should learn myself but I've already spent quite a bit of time trying to wrap my head around it and I was just hoping for some clarification. I think it'll do me a lot of good from here to look at best methods of handling arrays in PHP and jQuery and I'll be set. Thanks again, now I'll go RTFM.
BenjiBee
IMO, it's called T**F**M because reading it can really suck sometimes, and it can be hard to make heads or tails of. Glad I could help :)
JGB146