Question

我有jQuery幻灯片文字。它工作正常。

但现在我希望使用jQuery Ajax自动刷新从数据库中获取幻灯片文本的内容。

<div id="slides">
    <p class="quote-phrase"></p>
</div>

的jQuery

setInterval(function()
{
    $.ajax(
    {
        url: "chk",
        type: "POST",
        data:
        {
        },
        dataType: "JSON",
        success: function (jsonStr)
        {
            $('.quote-phrase').empty();
            var slideLen = jsonStr.slide.length;
            for(var i=0; i<slideLen; i++)
            {
                var slide = jsonStr.slide[i];

                var newOption2 = $('<span>'+slide+'</span>');
                $('.quote-phrase').append(newOption2);
            }
        }
    }
}, 1000);

当我把它$('.quote-phrase').append(newOption2);时，它只显示1个数据（我有更多数据并检查json结果，有更多数据）。

这是jsonStr结果：

{＆＃34; islamicDate＆＃34;：＆＃34; 11 Shafar 1439＆＃34;，＆＃34; logo＆＃34;：＆＃34; logo.jpg＆＃34;，＆＃34; mosqueName＆＃ 34;：＆＃34; MT。 Nurullah＆＃34;，＆＃34; mosqueAddress＆＃34;：＆＃34; Jalan Gaharu Lot 218，Muka Kuning＆＃34;，＆＃34; mosqueWebsite＆＃34;：＆＃34; http：//mtnurullah.com&# 34;，＆＃34; mosqueTelp＆＃34;：＆＃34; 0770-611711＆＃34;＆＃34;纬度＆＃34;：＆＃34; 103.92000000＆＃34;＆＃34;经度＆＃34; ：＆＃34; 1.03000000＆＃34;＆＃34;高度＆＃34;：＆＃34; 3.07＆＃34;＆＃34;时区＆＃34;：＆＃34 + 7＆＃34;，＆＃34; calculationMethod＆＃34;：＆＃34; Depag＆＃34;＆＃34; currentTime的＆＃34;：＆＃34; 17：52：02＆＃34;＆＃34;消息＆＃34;：[＆＃34; Diharapkan kepada seluruh jamaah agar meluruskan dan merapatkan shaf ketika sholat＆＃34;，＆＃34; Test 2＆＃34;，＆＃34; Test 3＆＃34;]，＆＃34; slide＆＃34;：[＆＃34; Dari Anas bin Malik ra berkata：Rasulullah看到bersabda，\＆＃34; Sesungguhnya Allah lebih suka menerima taubat seorang hamba-Nya melebihi kesenangan seorang yang menemukan kembali tiba-tiba untanya yang telah hilang daripadanya di tengah hutan \＆＃34;。（Bukhari - \ r \ n穆斯林）＆＃34;，＆＃34; Dari Abu Said dan Abu Hurairah r.a. berkata：Rasulullah看到bersabda，\＆＃34; Tiadalah seorang穆斯林itu menderita kelelahan atau penyakit atau kesusahan（kerisauan hati）hingga tertusuk duri melainkan semua itu akan menjadi penebus kesalahan-kesalahannya。\＆＃34;＆＃34;]} < / p>

Answer 1

＆＃13;

var jsonstr = {"islamicDate":"11 Shafar 1439", "logo":"logo.jpg", "mosqueName":"MT. Nurullah", "mosqueAddress":"Jalan Gaharu Lot 218, Muka Kuning", "mosqueWebsite":"http:\/\/mtnurullah.com", "mosqueTelp":"0770-611711", "latitude":"103.92000000", "longitude":"1.03000000", "altitude":"3.07", "timezone":"+7", "calculationMethod":"Depag", "currentTime":"17:52:02", "message":["Diharapkan kepada seluruh jamaah agar meluruskan dan merapatkan shaf ketika sholat", "Test 2", "Test 3"], "slide":["Dari Anas bin Malik r.a. berkata: Rasulullah saw bersabda, \"Sesungguhnya Allah lebih suka menerima taubat seorang hamba-Nya melebihi kesenangan seorang yang menemukan kembali tiba-tiba untanya yang telah hilang daripadanya di tengah hutan\". (Bukhari -\r\n Muslim)", "Dari Abu Said dan Abu Hurairah r.a. berkata: Rasulullah saw bersabda, \"Tiadalah seorang Muslim itu menderita kelelahan atau penyakit atau kesusahan (kerisauan hati) hingga tertusuk duri melainkan semua itu akan menjadi penebus kesalahan-kesalahannya.\""]};
                    $('.quote-phrase').empty();
                    $.each(jsonstr,function( index,element){
                        if (typeof element == Array){
                            element.forEach(function(element1, index){
                                var newOption2 = $('<span>' + element1 + '</span></br></br>');
                                $('.quote-phrase').append(newOption2);
                            });
                            
                        }else{
                            var newOption2 = $('<span>' + element + '</span></br></br>');
                            $('.quote-phrase').append(newOption2);
                        }
                        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quote-phrase"></div>

＆＃13;

Answer 2

代码工作正常。我创建了一个有效的演示。您要将<span>附加到<p>标记，它会以连续格式显示输出，这可能会导致您将其视为单个实体。我已添加</br>以了解其中的差异。

$(document).ready(function() {
var jsonStr = {"islamicDate":"11 Shafar 1439","logo":"logo.jpg","mosqueName":"MT. Nurullah","mosqueAddress":"Jalan Gaharu Lot 218, Muka Kuning","mosqueWebsite":"http:\/\/mtnurullah.com","mosqueTelp":"0770-611711","latitude":"103.92000000","longitude":"1.03000000","altitude":"3.07","timezone":"+7","calculationMethod":"Depag","currentTime":"17:52:02","message":["Diharapkan kepada seluruh jamaah agar meluruskan dan merapatkan shaf ketika sholat","Test 2","Test 3"],"slide":["Dari Anas bin Malik r.a. berkata: Rasulullah saw bersabda, \"Sesungguhnya Allah lebih suka menerima taubat seorang hamba-Nya melebihi kesenangan seorang yang menemukan kembali tiba-tiba untanya yang telah hilang daripadanya di tengah hutan\". (Bukhari -\r\n Muslim)","Dari Abu Said dan Abu Hurairah r.a. berkata: Rasulullah saw bersabda, \"Tiadalah seorang Muslim itu menderita kelelahan atau penyakit atau kesusahan (kerisauan hati) hingga tertusuk duri melainkan semua itu akan menjadi penebus kesalahan-kesalahannya.\""]};

 			$('.quote-phrase').empty();
            var slideLen = jsonStr.slide.length;
            for(var i=0; i<slideLen; i++)
            {
                var slide = jsonStr.slide[i];

                var newOption2 = $('<span>'+slide+'</span></br></br>');
                $('.quote-phrase').append(newOption2);
            }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slides">
    <p class="quote-phrase"></p>
</div>

Answer 3

每秒从滑块中删除所有元素，然后重新填充它。这意味着滑块无法通过这种方式进入第二个元素。

要解决此问题，您必须检查要添加/删除的元素，而不是仅清除所有元素。

如果用这个代替success中的代码，它应该可以工作：

//Check if we need to remove elements first.
$(".quote-phrase span").each(function() {

    //If we can't find it: remove it.
    var index = jsonStr.slide.indexOf($(this).text());
    if (index == -1)
        $(this).remove();
    else
        jsonStr.slide.splice(index, 1);
})

//Check if we need to add items:
for (var i = 0; i < jsonStr.slide.length; i++) {

    var slide = jsonStr.slide[i];
    var newOption2 = $('<span>'+slide+'</span>');
    $('.quote-phrase').append(newOption2);
}

jQuery使用ajax自动刷新设置要滑动的数据

3 个答案: