Question

我目前正在构建一个带有三个下拉列表的HTML表单，当下拉列表发生更改时，这些下拉列表会更改屏幕上的内容。我通过在更改下拉框时调用AJAX函数来实现此目的。然后，它与PHP函数交互，后者返回查询数据库，然后以JSON数组返回结果。返回此数据后，我从返回的数组创建HTML，然后在屏幕上向用户显示。

我遇到了在JSON数组中返回URL的问题。对于每个结果，我创建一个带有内联样式的锚标记，该样式使用返回的URL作为background-image url。以下是一个例子：

jQuery(data).each(function(key, caseStudy) {                        
    html += '<div class="items-row cols-1 row-' + key + ' row-fluid clearfix">';
        html += '<div class="span12">';
            html += '<div class="item column-1">';                                      
                html += '<a href="#" style="background-image:url(' + caseStudy.introImage + ');"></a>';
                html += '<a href="#" class="title">Aberystwyth University</a>';                                         
            html += '</div>';
        html += '</div>';
    html += '</div>';
});
    jQuery(".case-studies").html(html);
}

我循环遍历JSON数组中返回的每个结果，并构建一个锚标记，该标记使用返回的URL（caseStudy.introImage）来更改具有内联stlye的元素的背景图像。此内联样式似乎没有正确显示。我甚至没有得到输出HTML中显示的'style ='属性。有谁知道为什么会这样？我已经包含了我的jQuery和PHP函数，因此您可以看到正在发送和接收的数据。感谢

AJAX致电：

jQuery(document).on("change", "#case-studies-filter-wrap form select", function() {
            var url = "index.php";
            jQuery.ajax({
                type      :   'post',
                dataType  :   'json',
                url       :   url,
                data      :   jQuery("#case-studies-filter-wrap form").serialize() + "&tmpl=barebones" + "&caseStudy=1",
                success   :   function(data) {
                    if(data) {
                        var html = "";
                        jQuery(data).each(function(key, caseStudy) {                        
                            html += '<div class="items-row cols-1 row-' + key + ' row-fluid clearfix">';
                                html += '<div class="span12">';
                                    html += '<div class="item column-1">';                                          
                                        html += '<a href="#" style="background-image:url(' + caseStudy.introImage + ');"></a>';
                                        html += '<a href="#" class="title">Aberystwyth University</a>';                                         
                                    html += '</div>';
                                html += '</div>';
                            html += '</div>';
                        });
                        jQuery(".case-studies").html(html);
                    }
                }
            });
        });

PHP函数（我只显示在数据库查询返回正确数据时构建的返回数组。）

$results = $db->loadAssocList();

    foreach($results as $result) {
        $images = json_decode($result['images']);           
        $caseStudiesReturn[] = array(
            'id'           =>   $result['id'],
            'name'         =>   $result['title'],
            'introImage'   =>   JURI::base() . stripslashes($images->image_intro),
            'fullImage'    =>   JURI::base() . $images->image_fulltext,

        );
    }   

    header("Content-type: application/json");
    echo json_encode($caseStudiesReturn);

返回数据的控制台日志：

fullImage
"http://###############/images/case-studies/devon-cornwall-constabulary/images/Intro.jpg"

id
"45"

introImage
"http://isca0###############/images/case-studies/devon-cornwall-constabulary/cover/cover-image.jpg"

name
"Devon & Cornwall Constabulary"

以下是生成的HTML的样子（不正确）：

<a cover-image.jpg");"="" cover="" devon-cornwall-constabulary="" case-studies="" images="" ~gvmulti="" #########.info="" http:="" style="background-image:url(" href="#"></a>

此外，这是收到的返回的JSON数据。反斜杠会导致错误吗？

[{"id":"45","name":"Devon & Cornwall Constabulary","introImage":"http:\/\/###########.info\/~gvmulti\/images\/case-studies\/devon-cornwall-constabulary\/cover\/cover-image.jpg","fullImage":"http:\/\/##########.info\/~gvmulti\/images\/case-studies\/devon-cornwall-constabulary\/images\/Intro.jpg"}]

JSON返回值未正确更改CSS背景图像

0 个答案: