Question

在此页面上......

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

当用户将块拖放到网格上时，我希望能够以某种形式将位置发送到php脚本，将其保存到一个只记录坐标的表中（例如“x1y2”，“ x1y3“等）成行。到目前为止，我的表中的字段非常简单（blockID，blockCoords）

最好的方法是什么？我对两件事情发表了意见： -

1）使用jQuery ajax，我怎样才能将包含坐标的字符串作为列表发送？是否最好创建一个xml字符串，或者是否有另一种我没想过的方式......我将如何做到这一点

和..

2）基于用于发送数据的方法（xml或其他），我将如何处理接收php脚本中的数据以将数据保存到表中。我知道如何保存记录等，只是想知道如何最好地处理这种情况。

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
            }
        });
    }
});

并在/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;

所以在php文件中我们只是检查$_POST变量left是否存在。我们假设top也可用。我们使用strings left / topvalues创建一个mysqli连接，准备一个安全语句，将参数绑定为$_POST。然后我们检查执行是否没有返回false（返回true / false），如果没有，我们传递一个值并退出条件。如果没有，默认情况下将返回false。

修改

从您的评论中，您希望保存用户执行的操作，直到准备好实际执行插入，这也很容易实现。

var dc = 0, drops = {};

dc将是dropcount，drops将成为对象。

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

在上文中，我们只是通过drops对象递增，在每个drop上存储左/上值的信息。

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

这里，我们有一个带保存类的保存按钮，我们阻止默认动作，然后我们将drops对象发送到服务器。

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

现在我们检查$ _POST变量'drop'是否存在，我们将采用与上述相同的策略。我只是推荐一个帮助器function saveDrops($obj)，迭代返回的drop并为传入的每个obj执行保存。

Answer 2

1）是的，使用jQuery ajax发布coords和block id。

2）它们将在$ _POST变量中用于PHP。

请参阅：jQuery Post

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

2 个答案: