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

Question

我正在使用闪烁板创建一个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

听起来插件

的初始化发生在 DOM 加载时。也许您有一些如下所示的代码：

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

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

1. DOM 就绪
2. 闪烁板已初始化
3. 已发送的 JSON AJAX 请求
4. 返回的 JSON 响应
5. 已创建网页

您需要 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 2

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

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

或者在代码 PHP 中

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

Answer 3

<?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返回JSON_ERROR_SYNTAX但在线格式化程序说JSON没问题

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/