html页面之间传递的JSON数据[重复]答案

【问题标题】：JSON data passing between html pages [duplicate]html页面之间传递的JSON数据[重复]
【发布时间】：2012-07-24 18:41:17
【问题描述】：

可能重复：
Javascript DOM errors

我有以下 html 代码：

<html>
<head>
</head>
<body>
<div id="1" "display:block">
</div>
<div id="2" "display:none">  // no onLoad() anymore!!
</div>
</body>
</html>

我的 JavaScript 代码如下：

$.ajax({
        type: 'GET',
        url: ........,
        dataType: "json",
        complete: function (xhr, statusText) {
            alert(xhr.status);
        },
        success: function (data, textStatus, jqXHR) {
            alert(JSON.stringify(data));
            if(document.getElementById(1).style.display == "block"){ 
                document.getElementById(1).style.display = "none"; 
                document.getElementById(2).style.display = "block"; }
            addBooks(data); // Passing JSON to be replaced on page
        },

        function (data, textStatus, jqXHR) {
            alert(data);
            alert('error');
        },
    });

function addBooks(data) { // USing DOM to populate the tables 


    //var  newdata=document.getElementById('addBooks');
    //newdata.setattribute()

    //get the unordered list

    var newdata = document.getElementById('addBooks');
    var parent = document.getElementById('gBookList');
    //removeChildrenFromNode(parent);

    //create list divider
    var listdiv = document.createElement('li');
    listdiv.setAttribute('id', 'gBookListDiv');
    listdiv.innerHTML = ("Books Found:");
    parent.appendChild(listdiv);
    // (this is where the first error happens)

    //create dynamic list

    for (i = 0; i < data.length; i++) {
        // (this is where the second error happens)



        //create each list item 
        var listItem = document.createElement('li');
        listItem.setAttribute('id', 'gBookListItem');
        parent.appendChild(listItem);
        //var link = document.createElement('a');
        //link.setAttribute('onclick','displayBook(data[i])');
        //link.setAttribute('href','#FindBook)');
        //listItem.appendChild(link);
        var pic = document.createElement('img');
        pic.setAttribute('src', data[i].pictureURL);
        pic.setAttribute('width', '80px');
        pic.setAttribute('height', '100px');
        pic.setAttribute('style', 'padding-left: 10px');
        link.appendChild(pic);
        var brk = document.createElement('br')
        link.appendChild(brk);
        var title = document.createElement('p');
        title.innerHTML = data[i].title;
        title.setAttribute = ('style', 'float:right');
        link.appendChild(title);
        var author = document.createElement('p');
        author.innerHTML = data[i].author;
        link.appendChild(author);
    }
    var list = document.getElementById('gBookList');
    // $(list).listview("refresh");
}

/*function removeChildrenFromNode(node){
            while (node.hasChildNodes()){
                node.removeChild(node.firstChild);
            }
        //}*/

我不断收到以下错误，导致我无法填充列表，我正在使用 Chrome

未捕获的类型错误：无法调用 null 的方法“appendChild”
未捕获的类型错误：无法读取未定义的属性“长度”

我昨天已经发布了这个问题，但我只是想从新的角度了解错误可能是什么。

【问题讨论】：

你不是already ask this question吗？
是的，我做到了，我在问题中提到了它
清理你的旧问题（例如修复代码格式）。如果你有更多的代表，你也可以开始赏金以得到更多的关注。
正如其他人所提到的，您不应该两次问完全相同的问题。您应该对您的原始问题进行编辑，或询问已发布答案的人以获得澄清或更多信息。您还接受了对原始问题的回答，这表明您的问题已得到解决。请尝试解决原始问题。
好的，抱歉，我是新来的，谢谢我已经进行了编辑

标签： javascript html jquery google-chrome jquery-events

【解决方案1】：

这里可能有一些问题：-

你在做这个跨域吗？如果您考虑改用 JSONP，这将解决您可能会遇到的一些问题，即由于安全策略而导致数据被“保留”。
你也在访问一个变量并假设它有一个值

var parent = document.getElementById('gBookList');

在使用父标签之前，您应该确保它不为空（或空引用）并且元素 (gBookList) 确实存在于您的文档中。

【讨论】：

【解决方案2】：

必须取消注释

// var link = document.createElement('a');

在

link.appendChild(pic);

这个元素还没有贴花（在你的情况下只是评论）！

【讨论】：