javascript - 使用 css jquery 设置背景图像

Question

我创建了一个脚本来编辑特定 div 的背景图像、颜色、大小和位置。 在搜索特定 div 和加载设置的文档就绪脚本上

var color_default = $('.banneruser').css("background-color");
var image_default = $('.banneruser').css("background-image");
var align_default = $('.banneruser').css("background-position");
var size_default = $('.banneruser').css("background-size");

通过一个简单的面板，我分别编辑所有设置，并在保存按钮上执行一个 ajax 调用，将我的所有设置设置到数据库中

function don() {

            var color_set   = $('.banneruser').css("background-color");
        var align_set   = $('.banneruser').css("background-position");
        var size_set    = $('.banneruser').css("background-size");
        var image_set   = $('.banneruser').css("background-image");


        $.ajax({ 
            type: "GET",  
            url:  "set.php", 
            data: "color=" + color_set + "&align=" + align_set + "&size=" + size_set + "&image=" + image_set,
            success: function(response){
                alert(response);
            }
        });
        return false;
}

并将set.php存入数据库

<? include 'config.php'; connect(); session_start();

    $color=mysql_real_escape_string($_GET['color']);
    $image=mysql_real_escape_string($_GET['image']);
    $align=mysql_real_escape_string($_GET['align']);
    $size=mysql_real_escape_string($_GET['size']);

    //data
    $query = "SELECT * FROM utenti WHERE username='".$_SESSION['user']."'"; 
    $result = mysql_query($query);
    $id = mysql_result($result,0,"id");

    $banner = "background-color:".$color."; background-image:".$image."; background-position:".$align."; background-size:".$size."; ";

    $done= mysql_query("UPDATE `utenti` SET `banner` = '$banner'  WHERE `id` = '$id';");

    if($done){ echo '<i class="icon-ok-sign"></i>'; } else { echo '<i class="icon-warning-sign"></i>'; }

?>

基本上，这在 chrome 上工作得很好，但是 firefox 和 IE 在数据库中设置了一个像这样的奇怪字符串

 background-color:rgb(219, 126, 50); background-image:url(" http:="" posth.it="" account="" felicegg="" banner.jpg");="" background-position:50%;="" background-size:auto;="" "="

即使我在我的数据库中完美地阅读了它

background-color:rgb(219, 126, 50); background-image:url("http://posth.it/account/felicegg/banner.jpg"); background-position:50%; background-size:auto; 

PS:如果我在 chrome 上设置设置，ie 和 firefox 完美读取字符串，即使它发生了那个问题(也在 chrome 上)。

问题是为什么？ :D 有什么想法吗？

Answer 1

你应该转义你的数据:

function don() {

        var color_set   = $('.banneruser').css("background-color");
        var align_set   = $('.banneruser').css("background-position");
        var size_set    = $('.banneruser').css("background-size");
        var image_set   = $('.banneruser').css("background-image");

        $.ajax({ 
            type: "GET",  
            url:  "set.php", 
            data: "color=" + encodeURI(color_set) + "&align=" + encodeURI(align_set) + "&size=" + encodeURI(size_set) + "&image=" + encodeURI(image_set),
            success: function(response){
                alert(response);
            }
        });
        return false;
}