发送和处理可变大小数据的最佳方式

Question

On this page...

http://lab.2toria.com/reflex/index2.php

When the user has dragged and dropped blocks onto the grid, I want to be able to send the positions in some form to a php script that will save them into a table that simply records the coordinates (eg "x1y2", "x1y3", etc) into rows. The fields in my table so far are VERY simple (blockID, blockCoords)

What would be the best way to do this? I'm after your opinion on two things:-

1) Using jQuery ajax, how could I send a string containing the coordinates as a list? Would it be best to create an xml string, or is there another way I've not thought of...and how would I do this

and..

2) Based on the method used to send the data (xml, or whatever), how would I then process the data in the receiving php script to save the data into a table. I know how to save records etc, just wanting to know how best to deal with this situation.

Answer 1

$('element').droppable({
    drop:function(event, ui){
        $.ajax({
            url: '/path/to/my/file.php',
            type: 'POST',
            data: {'left' : ui.helper.position().left,
                   'top': ui.helper.position().top},
            success: function(data){
              //do something with the response from the server
            }
        });
    }
});

And in /path/to/my/file.php

if(isset($_POST['left'])):
    $db = new mysqli('connection info here');
    $q = $db->prepare('INSERT INTO some_table (left, top) VALUES (?,?)'); //prepare the statement
    $q->bind_param('ss', $_POST['left'], $_POST['top']); //safe binding
    if(FALSE !== $q->execute()):
        return 'Query Executed!';
    endif; //execute the statement
    return false;
endif;

So in the php file we're simply checking for the existence of the $_POST variable left. We assume top will be available also. We make a mysqli connection, prepare a safe statement, bind the parameters as strings, using the $_POST left/topvalues. Then we check if the execution didn't return false (returns true/false), and if it didn't, we pass a value and exit out of the conditionals all together. If not, the return false will fire by default.

Edit

From your comment, you want to save the actions that the user performs until ready to actually perform the insert, that's easily doable as well.

var dc = 0,
    drops = {};

dc will be the dropcount, and drops will be an object.

$('element').droppable({
    drop: function(event, ui){
        drops[dc] = {'left' : ui.helper.position().left, 'top' : ui.helper.position().top};
        dc++;
    }
});

In the above, we simply increment through the drops object, storing the information for the left/top values on each drop.

$('.save').click(function(e){
    e.preventDefault();
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: {'drops': drops},
        success: function(data){
            console.log(data);  
        }
    });
});

Here, we have a save button with a class of save, we prevent the default action, then we sent the drops object to the server.

if(isset($_POST['drops'])):
    //same process as outlined above, use a helper function to insert the rows
endif;

Now we check for the existence of the $_POST variable 'drops', we'll employ the same tactics as above. I would simply recommend a helper function saveDrops($obj), iterating the returned drops and performing a save for each obj passed in.