将CSS数据存储到MySQL数据库中 - Store CSS data into a MySQL database

Store CSS data into a MySQL database

本文关键字：MySQL 数据库存储 CSS 数据 | 更新日期: 2023-09-27

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

我的目标是抓取用户和位置数据(即，userid, frame_ID, imageid，宽度，高度，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 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.";
?>

如何将这些信息插入到数据库中?

首先，考虑使用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);
    }
);

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