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

Question

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

我的目标是获取用户和位置数据(即 userid、frame_ID、imageid、宽度、高度、顶部、左侧和 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 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)。

Action 流程是这样的:

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. save.php 中的 (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.";
   ?>