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

Question

我有一个系统，用户可以在其中操纵图像。 与此非常相似： http : //jsfiddle.net/Thaikhan/fGJ59/9/show/

我的目标是获取用户和位置数据（即，userid，frame_ID，imageid，宽度，高度，顶部，左侧和z索引）并将其存储在数据库中。 对于操作帧中的每个图像，必须将新行插入数据库。 我最终希望用户能够保存/编辑他们排列的图像。

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

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

}

目前，Post 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）。

操作流程如下：

1. （JS）使用jQuery的$("#parent").children()从容器中选择所有元素，

2. （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") }); }); 

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

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

4. （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."; ?>