Question

我有一个AJAX计时器，它使用GET命令通过JSON检索MySQL编码PHP查询...

计时器工作正常＆amp;信息也正在被检索......

为了能够存储结果以便我可以在DIV中显示结果我已经VAR LIST和EVALUATED xmlhttp.responseText < / p>

然后我创建了一个documentgetelementbyid列表来保存结果，以便它们可以在网站的DIV中使用

如果我在HTML中按顺序显示数据，那么一切都会正常运行，但只要我尝试将数据显示在我的JavaScript文件中显示显示空白..

我猜这是因为我试图将结果存储在JavaScript中......

如何在JavaScript中存储这些结果，然后用HTML调用它们，而不是它们在JavaScript中的顺序..

我希望我所解释的内容有道理，任何建议都会受到高度赞赏......

JAVASCRIPT代码：

function getPlaylist()
{
     var xmlhttp, timer;

     if (window.XMLHttpRequest)
     {
        xmlhttp = new XMLHttpRequest();
     } 
     else
     {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }

     xmlhttp.onreadystatechange = function ()
     {
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
       {

          var list = eval ('('+xmlhttp.responseText+')');

          document.getElementById("list0.artist").innerHTML=list[0].artist;
          document.getElementById("list0.title").innerHTML=list[0].title;
          document.getElementById("list0.label").innerHTML=list[0].label;
          document.getElementById("list0.albumyear").innerHTML=list[0].albumyear;
          document.getElementById("list0.picture").innerHTML='<img src="/testsite/covers/' + list[0].picture + '" width="200" height="auto"/>';

          document.getElementById("list1.artist").innerHTML=list[1].artist;
          document.getElementById("list1.title").innerHTML=list[1].title;
          document.getElementById("list1.label").innerHTML=list[1].label;
          document.getElementById("list1.albumyear").innerHTML=list[1].albumyear;
          document.getElementById("list1.picture").innerHTML='<img src="/testsite/covers/' + list[1].picture + '" width="150" height="auto"/>';

          document.getElementById("list2.artist").innerHTML=list[2].artist;
          document.getElementById("list2.title").innerHTML=list[2].title;
          document.getElementById("list2.label").innerHTML=list[2].label;
          document.getElementById("list2.albumyear").innerHTML=list[2].albumyear;
          document.getElementById("list2.picture").innerHTML='<img src="/testsite/covers/' + list[2].picture + '" width="50" height="auto"/>';

          document.getElementById("list3.artist").innerHTML=list[3].artist;
          document.getElementById("list3.title").innerHTML=list[3].title;
          document.getElementById("list3.label").innerHTML=list[3].label;
          document.getElementById("list3.albumyear").innerHTML=list[3].albumyear;
          document.getElementById("list3.picture").innerHTML='<img src="/testsite/covers/' + list[1].picture + '" width="50" height="auto"/>';

          document.getElementById("list4.artist").innerHTML=list[4].artist;
          document.getElementById("list4.title").innerHTML=list[4].title;
          document.getElementById("list4.label").innerHTML=list[4].label;
          document.getElementById("list4.albumyear").innerHTML=list[4].albumyear;
          document.getElementById("list4.picture").innerHTML='<img src="/testsite/covers/' + list[4].picture + '" width="50" height="auto"/>';  
       }
    };


    xmlhttp.onerror = function() 
    {
      clearTimeout(timer);
    };

    xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true);
    xmlhttp.send();


    timer = setTimeout(getPlaylist, 1000);
}

HTML代码：

（这可以按以下顺序工作，但如果我要更改第一个DIV以查找“list1.artist”而不是“list0.artist”，则不会显示该页面。）

<!DOCTYPE html>
<html>
<head>

<script src="/testsite/OneSecondPlaylist.js"></script>
</head>

<body onload="getPlaylist()">

<h1>Now Playing</h1>
<div id="list0.artist"></div>
<div id="list0.title"></div>
<div id="list0.label"></div>
<div id="list0.albumyear"></div>
<div id="list0.picture"></div>

<h2>Last Played</h2>
<div id="list1.artist"></div>
<div id="list1.title"></div>
<div id="list1.label"></div>
<div id="list1.albumyear"></div>
<div id="list1.picture"></div>

<h2>History</h2>
<div id="list2.artist"></div>
<div id="list2.title"></div>
<div id="list2.label"></div>
<div id="list2.albumyear"></div>
<div id="list2.picture"></div>

<div id="list3.artist"></div>
<div id="list3.title"></div>
<div id="list3.label"></div>
<div id="list3.albumyear"></div>
<div id="list3.picture"></div>

<div id="list4.artist"></div>
<div id="list4.title"></div>
<div id="list4.label"></div>
<div id="list4.albumyear"></div>
<div id="list4.picture"></div>
</body>

</html>

Answer 1

听起来你在做这样的事情：

<h1>Now Playing</h1>
<div id="list1.artist"></div>
<div id="list1.title"></div>
<div id="list1.label"></div>
<div id="list1.albumyear"></div>
<div id="list1.picture"></div>

<h2>Last Played</h2>
<div id="list1.artist"></div>
<div id="list1.title"></div>
<div id="list1.label"></div>
<div id="list1.albumyear"></div>
<div id="list1.picture"></div>

如果是这样，您的屏幕将变为空白，因为当您尝试使用id =“list1.artist”访问div时，javascript会找到具有该ID的元素的两个实例并引发错误。由于此错误，javascript会中止使用.innerHTML将值插入div的代码的其余部分。

打开您的JavaScript控制台：右键单击＆gt;检查元素＆gt;控制台，并检查您是否收到javascript错误。这可能是你的问题。

要回答关于如何以不同的顺序显示HTML的问题......一个实现是使用knockout.js，这是一个非常棒的数据绑定库，使得这样做很容易（相信我，信任我，相信我）。这需要一点点学习，但是他们有一个很好的教程，如果你从未使用它，它会成功地让你大吃一惊：]

http://knockoutjs.com/

祝你好运朋友。

HTML当DIV与Javascript的顺序不同时，不显示

1 个答案: