How can I send an array of javascript object to a php script via $.post?

Question

I have a table of data on my page. The columns are "start", "end", "comment", and "options". Within the options column is a button to delete the row, and a button that makes a row of the table editable. This allows the values of "start", "end", and "comment" to be changed. Clicking it again finishes the editing process. Finally, there is a way to add another row to the table. All of this works as expected.

I want to add a button at the bottom that creates an array out of the data in the table, that looks like this (represented as JSON purely for ease of showing to SO: not required):

[
    {
     "start"  :"2009/08/01",
     "end"  :"2009/08/08",
     "comment" :"an example date.",
    },
    {
     "start"  :"2009/07/01",
     "end"  :"2009/07/08",
     "comment" :"another example date, a month earlier.",
    },
    {
     "start"  :"2000/07/01",
     "end"  :"2000/07/08",
     "comment" :"another example date, a year earlier. You get the idea.",
    }
]

I shouldn't have too much trouble building the array, but once I have, how can I post it to a backend php script (which will then use put_csv() to write the data to a file)? Ideally, it would be availiable server-side in a array format, to allow validation.

I'm happy to use jquery, if it's required.

Answer 1

I would definitely use jQuery. Here is the page for the $.post() function.

http://docs.jquery.com/Ajax/jQuery.post

One caveat is that $.post() is a wrapper for the $.ajax() function that is simplified and eliminates your ability to set callbacks for anything but a successful post. For important transactions via AJAX, I would use this:

http://docs.jquery.com/Ajax/jQuery.ajax

An example being:

$.ajax({
      url: "script.php",
      global: false,
      type: "POST",
      data: ({id : this.getAttribute('id')}),
      dataType: "html",
      success: function(msg){
         alert(msg);
      }
   });

Answer 2

How you end it to the server depends on what do you want to archieve. If you want to load a new page, which will process the data, you can use an usual form with hidden inputs. Alternatively, if you want to process is in the background via AJAX, use jQuery.ajax as CRasco said. Either way you use, you need to convert the structured array into a simple key/value list.

One option is to generate a JSON document (I don't think jQuery provides a function for this, but you can easily find something) and use a single field with the serialized document. Then on the server side you would use json_decode to get the array back. If you are using the AJAX method, the data option in jQuery.ajax call would contain:

{
    'data': '[{"start":"2009/08/01","end":"2009/08/08","comment":"an example date."},...'
}

A better approach would be to serialize it into a list of fields in a format that PHP natively understands. That means you have to do nothing special, and $_POST['data'] will contain the array. For example:

{
    'data[0][start]': '2009/08/01',
    'data[0][end]': '2009/08/08',
    'data[0][comment]': 'an example date.',
    'data[1][start]': '2009/07/01',
    'data[1][end]': '2009/07/08',
    'data[1][comment]': 'another example date, a month earlier.',
    ... 
}

If you are using the form method, you need to generate input fields like:

<input type="hidden" name="data[0][start]" value="2009/08/01" />