Question

目前我正在尝试使用javascript来获取一个html页面，以便从网站检索和显示JSON，但我遇到了一些问题。

用户单击一个按钮，网站从5个链接中检索数据，并显示JSON中包含的数据。所述数据如下所示：

LINK 0    
    { "Genre": "Fantasy", "Title": "Book1" }

LINK 1
    { "Genre": "sciFi", "Title": "Book2"}

首先，我可以检索并显示数据，但我想要的方式是不会显示两次数据。目前我的代码重复5次，遍历链接但显示所有以前的链接，所以我得到了这个：

Book1 Book1 Book2 book1 Book2 Book3 book1 Book2 Book3 Book4 Book1 Book1 Book2 book1 Book2 Book3 book1 Book2 Book3 Book4 Book5

当我想要的时候：

Book1 Book2 Book3 Book4 Book5

单击该按钮后，如果再次单击该按钮，则应显示来自接下来的5个链接的另外5个数据部分。所以输出应该是：Book6 Book7 Book8 Book9 Book10。

我已经尝试了许多不同的代码变体来解决这个问题，但没有任何工作，我尝试修复它的时间越长，我最终会变得更加困惑。这是我的代码的当前状态：

<html>

    <head>

        <title>JSON-TEST</title>  

<script>

var jnodes = [] ;
var curr_line = 0;
var currentSet = 0;
var endSet = currentSet + 5;

function get_data()
{
    request= new XMLHttpRequest();

    request.open("GET","http://example.com/",true);

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

            var json_no_chapters= JSON.parse(request.responseText);

            reply=JSON.parse(request.responseText);

            add_nodes(reply);
        }
    }
    request.send()
} 

function getsets(page_from,page_to)
{
    var i = currentSet;
    while (i < endSet) 
    {    
        alert('get set '+i);   // Can't figure out how to do this without alert. everything falls apart without it.
        getset(i);  

        i++;
    }

    currentSet = page_to + 1;
    endSet = currentSet + 5;
}

function getset(pageno)
{
    request= new XMLHttpRequest();
    request.open("GET","http://example.com/?pageno="+pageno,true);

    request.onreadystatechange=function()
    {
        if(request.readyState==4 && request.status==200)
        {
            var json_chapter = JSON.parse(request.responseText);

            jnodes.push(json_chapter);


        }
    }
    request.send()
    add_nodes(jnodes);
}

function add_nodes(nodesj)
{
    var i
    for(i=0;i<nodesj.length;i++) //  <---- trouble spot I think
    {
        add_node(nodesj[i]);
    }
}

function add_node(nodej)
{
    alert(' add node '+nodej.title); // Similar problem with this alert, without it the code works wrong and dont know a way to replace it

    var sec=document.createElement("section");
    var par=document.createElement("p");
    sec.appendChild(par);
    par.appendChild(document.createTextNode(nodej.title));

    document.getElementById("mydiv").appendChild(sec);
} 
</script>
<body>


    <header>

    <nav><ul>
    <li> <input id="nextline" type="button" value="Next Line" /></li>
    <li> <input id="prevline" type="button" value="Prev Line" /></li>

    </nav></ul>
    </header>

    <h2> JSON </h2>
    <div id="mydiv"> 


</div> 
    <input id="button" type="button" value="click" onclick="getsets(currentSet,endSet);" />



    </body>
    <script>


        </script>
</html>

我在代码中指出的另一个问题是我在代码中有两个警报，但我无法弄清楚如何替换它们。如果没有它们，我的代码会出错，我得到的输出错误就像Book1 Book1 Book1 Book3 Book5一样，但是对于它们，警报很快变得非常繁琐。

非常欢迎任何帮助或建议！

Answer 1

您的jnodes是全球性的。因此，每次添加节点时，都会打印整个阵列。使用计数器跟踪提醒的节点，并且每次只打印最后一个节点而不是整个阵列。我希望你能从这里拿走它。

JSON数据显示问题

1 个答案: