Question

我有一个用户可以操作图像的系统。它非常相似：http://jsfiddle.net/Thaikhan/fGJ59/9/show/

我的目标是获取用户和位置数据（即userid，frame_ID，imageid，width，height，top，left和z-index）并将其存储在数据库中。必须为操作帧中的每个图像将新行插入数据库。我最终希望用户能够保存/编辑他们安排的图像。

到目前为止，我已经能够使用以下方法生成包含所有数据的合并数组：

function getCSS() {

    var id_data = $(".frame div img").map(function() {
      return $(this).attr("id");
    }).get();

    var width_data = $(".frame div img").map(function() {
      return $(this).css("width");
    }).get();

    var height_data = $(".frame div img").map(function() {
      return $(this).css("height");
    }).get();

    var top_data = $(".frame div:has(img)").map(function() {
      return $(this).css("top");
    }).get();

    var left_data = $(".frame div:has(img)").map(function() {
      return $(this).css("left");
    }).get();

    var zindex_data = $(".frame div:has(img)").map(function() {
      return $(this).css("z-index");
    }).get();


    var images_array = [];
       $.each(id_data, function (index, value) {
        images_array.push(value);
        images_array.push(width_data[index]);
        images_array.push(height_data[index]);
        images_array.push(top_data[index]);
        images_array.push(left_data[index]);
        images_array.push(zindex_data[index]);
    });

    document.getElementById("demo").innerHTML = images_array;



////////////Post Data


$.post(
    "/save.php",
    images_array,
    function( data ){
        alert("Saved! Received response: " + data);
    }
);

}

发布数据目前似乎无能为力。

数组输出：

100,101px,101px,22px,126px,9998,103,96px,96px,152px,30px,9997,104,60px,60px,auto,auto,9996

输出image_id，width，height，top，left，zindex的值。他们重复没有结肠。我不知道这是否会让它变得更加困难。请注意，默认位置不是数字。

尝试使用@Marcin Koziarz的建议，save.php目前包含：

<?php
$images_array = $_POST['images_array'];
$userid = $_POST['userid'];
foreach( $images_array as $image ) {
    // run here query for each image

}
echo "Image data successfully saved.";
?>

如何将此信息插入数据库？

Answer 1

首先，考虑使用jQuery而不是简单的Javascript（它现在是事实上的标准 - 许多人声称他们知道jQuery不知道Javascript）。

行动流程将如下：

（JS）使用jQuery的$("#parent").children()，

（JS）使用jQuery的.each()方法创建一个包含每个图像，用户数据等所需数据的普通JS对象，例如：

myDataObject = {
    userid: 0,
    images: []
};
$("#parent").children().each(function(elem){
    myDataObject.images.push({
        left: $(elem).css("left"),
        top: $(elem).css("top"),
        zindex: $(elem).css("z-index")
    });
});

（JS）使用jQuery的AJAX方法发送对象，例如

$.post(
    "mysite.com/save.php",
    myDataObject,
    function( data ){
        alert("Saved! Received response: " + data);
    }
);

（PHP）在save.php中解析POST数据（使用$_POST数组）并运行SQL查询将其添加到数据库。完成后，echo将向用户显示的一些信息：

<?php
$images_array = $_POST['images'];
$userid = $_POST['userid'];
foreach( $images_array as $image ) {
    // run here query for each image
}
echo "Image data successfully saved.";
?>

将CSS数据存储到MySQL数据库中

1 个答案: