Question

我正在使用flickerplate创建一个jquery滑块。这是我对值进行硬编码时的代码，它可以正常工作。

<div class="flicker-example">

    <ul>
            <li data-background="lib/flicker-1.jpg">
            <div class="flick-title">Promo 1</div>
            <div class="flick-sub-text">25$ OFF FLAT !! Limited Offer!</div>
        </li>

        <li data-background="lib/flicker-2.jpg">
            <div class="flick-title">Promo 2</div>
            <div class="flick-sub-text">Bumper Sale !! Buy 1 Get 1 Free !!</div>
        </li>           
    </ul>
</div>

我的要求是使用我的JSON数组加载其中的内容。

<div class="flicker-example">
    <ul>
       <script type='text/javascript'>
        $(document).ready(function(){
                    /* call the php that has the php array which is json_encoded */
                $.getJSON('http://testdb2.weby.biz/deallist.php', function(data) {
                        /* data will hold the php array as a javascript object */
                        $.each(data, function(key, val) {
                            $(".flicker-example ul").append('<li data-background="'+ val.Product_Variant_Image + '"><div class="flick-title">' + val.Product_Brand_Name + '</div><div class="flick-sub-text">' + val.Product_Variant_Name + '</div></li>');
                        });
                });

        });
        </script>
    </ul>
</div>

以上是我的代码，我无法弄清楚为什么它不像硬编码那样工作。真的可以使用一些帮助，非常感谢

Answer 1

测试一下：在您的服务器上激活CORS（跨源请求）。 Apache示例：在.htaccess文件中

Header set Access-Control-Allow-Origin "*"

或者代码PHP

 header("Access-Control-Allow-Origin: *");

Answer 2

<?php

$checkLogin = file_get_contents("http://testdb2.weby.biz/deallist.php");

// This will remove unwanted characters.
// Check http://www.php.net/chr for details
for ($i = 0; $i <= 31; ++$i) { 
    $checkLogin = str_replace(chr($i), "", $checkLogin); 
}
$checkLogin = str_replace(chr(127), "", $checkLogin);

// This is the most common part
// Some file begins with 'efbbbf' to mark the beginning of the file. (binary level)
// here we detect it and we remove it, basically it's the first 3 characters 
if (0 === strpos(bin2hex($checkLogin), 'efbbbf')) {
   $checkLogin = substr($checkLogin, 3);
}

//$checkLogin = json_decode( $checkLogin );
//print_r($checkLogin);

?>




<div class="flicker-example">
    <ul>
       <script type='text/javascript'>
        $(document).ready(function(){
                    /* call the php that has the php array which is json_encoded */
                //$.getJSON('http://testdb2.weby.biz/deallist.php', function(data) {
            //alert(JSON.stringify(data));
                        /* data will hold the php array as a javascript object */
        $.each(<?php echo $checkLogin; ?>, function(key, val) {
                            $(".flicker-example ul").append('<li data-background="'+ val.Product_Variant_Image + '"><div class="flick-title">' + val.Product_Brand_Name + '</div><div class="flick-sub-text">' + val.Product_Variant_Name + '</div></li>');
                        });
                //});

        });
        </script>
    </ul>
</div>

有关详情：json_decode returns JSON_ERROR_SYNTAX but online formatter says the JSON is OK

Answer 3

听起来插件的初始化发生在DOM负载上。也许你有一些看起来像这样的代码：

$(document).ready(function() {
    $('.flicker-example').flickerplate();
});

当内容是硬编码的HTML时，它可以正常工作，因为它在代码执行时存在。但是，您正在使用异步请求来加载JSON数据，因此执行顺序如下所示：

DOM ready
Flickerplate已初始化
发送JSON AJAX请求
JSON响应已返回
HTML已创建

您需要2次实际发生在最后，如步骤5，所以更改$.getJSON来电的回调功能：

$(document).ready(function(){
    /* call the php that has the php array which is json_encoded */
    $.getJSON('http://testdb2.weby.biz/deallist.php', function(data) {
        /* data will hold the php array as a javascript object */
        $.each(data, function(key, val) {
            $(".flicker-example ul").append('<li data-background="'+ val.Product_Variant_Image + '"><div class="flick-title">' + val.Product_Brand_Name + '</div><div class="flick-sub-text">' + val.Product_Variant_Name + '</div></li>');
        });
        $('.flicker-example').flickerplate(); // initialise the plugin now that the HTML elements exist
    });
});

Answer 4

如果您的数组（数据）格式正确，如下所示：

arr[0]
Object {title: "Promo 1", text: "25$ OFF FLAT !! Limited Offer!"}
arr[1]
Object {title: "Promo 2", text: "Bumper Sale !! Buy 1 Get 1 Free !!"}

然后看看这个小提琴：

http://jsfiddle.net/n1su1q0h/1/

无序列表，动态加载<li> </li>

4 个答案: