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

我有一个用户可以操作图像的系统。与此非常相似：

我的目标是获取用户和位置数据，即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);
    }
);

}

Post数据目前似乎没有任何作用

阵列输出：

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

它输出图像id、宽度、高度、顶部、左侧和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.";
?>

---

我怎么可以把这个信息插入到数据库中？

首先，考虑使用jQuery而不是普通JavaScript——这是事实上的标准-很多人声称他们知道jQuery不知道JavaScript。 操作流程如下所示：

JS使用jQuery的$parent.children从容器中选择所有元素， JS使用jQuery创建一个普通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中的PHP使用$\u POST数组解析POST数据，并运行SQL查询将其添加到数据库中。完成后，回显一些将显示给用户的信息：

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

---

给所有对象一个类，并使用document.getElementsByClass获取所有对象。然后写一个循环，将CSS属性复制到一个数组中。我不明白，你最初的方法怎么了？为什么你不能让所有的个人风格属性传递到一个表单中并发布呢虽然对于每种样式，最好在数据库中有许多单独的行，并让它们共享userid collumn值，而不是一个大数组。除非还包括框架/库的标记，否则对于带有JavaScript标记的问题，需要纯JavaScript回答。-jQuery的时代已经过去了，它提供了兼容性和方便的方法，随着浏览器的不断成熟，这些方法变得越来越冗余。我同意。但有一个问题——传统浏览器将不再成熟，也无法强迫用户升级。另外，poster似乎缺乏使用JS的经验，从jQuery开始可能会帮助他完成工作。感谢您的帮助。这有助于引导我达到这一点。我编辑了我的帖子，添加了我到目前为止所做的事情。您介意详细介绍一下在本例中如何使用$.post和php查询吗？