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

【问题标题】：Unordered list, load <li> dynamically无序列表，动态加载<li>
【发布时间】：2014-11-30 16:49:17
【问题描述】：

我正在使用 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>

上面是我的代码，我不知道为什么它不像硬编码的那样工作。真的需要一些帮助，非常感谢

【问题讨论】：

您能否在浏览器的控制台窗口中显示错误（如果有）？
@VipulHadiya 这是硬编码滑块的样子imgur.com/AXUFNLx，这是动态滑块imgur.com/Wxlaeqb
我要求在控制台窗口中显示错误。在chrome浏览器中按F12右键显示是否有错误。或者右键单击并选择检查元素，然后从开发人员工具中选择控制台选项卡。
@VipulHadiya 实际上我正在开发这个 phonegap 应用程序，因此它不能在浏览器上运行，并且我在模拟器中没有任何错误。
尝试警报(JSON.stringify(data));查看函数内部的数据结果

标签： javascript jquery html css json

【解决方案1】：

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

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

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

DOM 准备就绪
闪烁板已初始化
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
    });
});

【讨论】：

【解决方案2】：

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

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

或者在PHP代码中

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：