1

这是我的 javascript 代码，我正在尝试使用从服务器收到的数据在 HTML 中创建一个动态列表，数据的类型为“json”

我的 Javascript 片段

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);
            }
        //}*/

我的html代码是

<!DOCTYPE html>

<head>
   <script ...> 
 <head>                  
<body onLoad="addBooks()">
    <div id="addBooks" class="row-fluid">
        <div id="gBookList">
        </div>
    </div>
</body>
</html>

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

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

我不明白为什么会发生这种情况，因为当我使用警报框进行调试时，.length 命令返回正确的整数（json 对象的数量）。

调用它的函数

$.ajax({
    type: 'GET',
    url: ........,
    dataType: "json",
    complete: function (xhr, statusText) {
        alert(xhr.status);
    },
    success: function (data, textStatus, jqXHR) {
        alert(JSON.stringify(data));
        window.location.replace("Page2_updated.html");
        addBooks(data); // Passing JSON to be replaced on page
    },

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

});

编辑

在此论坛上提出建议后，我将我的 HTML 文件更改为以下结构

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

我已经在调用函数中编辑了这部分

 $.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');
        },
    });

但我仍然收到以下错误 Uncaught TypeError: Cannot call method 'appendChild' of null Uncaught TypeError: Cannot read property 'length' of undefined

4

5 回答 5

2

这是构建列表的代码的工作版本。与您的版本进行比较，以查看您在标记和代码中犯错的地方。

您的第二个错误的来源是传递给 addBooks 函数的不正确数据（很可能是 null），因此您必须修复它。

Chrome 和 Firebug 具有出色的带有断点的 JavaScript 调试器，因此可以利用它来识别问题：

http://jsfiddle.net/tgth2/

编辑：

在您对问题发表评论和更新之后，您的问题非常明显：

  1. 您的第一个页面正在从服务加载 JSON 数据，但随后会加载window.location.replace("Page2 Updated.html");，这会将浏览器发送到新页面（请注意，您是addBooks(data);在之后立即调用的。但该代码永远不会执行，因为浏览器已经转到另一个页面
  2. 您的第二页包含<body onload="addBooks();">在其中，这将导致使用null数据调用该函数。这是你的问题的原因。

解决方案：

第一个建议是开始将 jQuery 用于您正在做的所有其他事情，而不仅仅是 AJAX 调用。

其次，您应该将 ajax 调用和结果呈现在一个页面中，因为将浏览器重定向到另一个页面没有任何意义。因为您的 javascript 始终在单个页面的上下文中工作。一旦你做了类似的事情，window.location.replace(..)你最终会失去你在当前页面中所做的一切。

如果您进行这些更改，您将看到您的列表加载得很好！

于 2012-07-24T00:31:08.157 回答
0

循环中的这一行创建多个具有相同 ID 的列表项：

listItem.setAttribute('id','gBookListItem');

尝试删除它 - 我认为你不需要它。

于 2012-07-24T00:11:20.180 回答
0

这是一个错误：

title.setAttribute=('style','float:right');

做：

var title = document.createElement('p');
    title.innerHTML = data[i].title;
    title.style.cssFloat = 'right';
link.appendChild(title);

和

var pic = document.createElement('img');
    pic.src = data[i].pictureURL;
    pic.width = '80px';
    pic.height = '100px';
    pic.style.paddingLeft = '10px';
link.appendChild(pic);

ETC......

于 2012-07-24T00:16:15.230 回答
0

您是否有可能不小心addBooks()在代码中的某个地方调用而没有任何data？

于 2012-07-24T00:36:40.140 回答
0

我试图将其简化为准系统，并且我很确定link未定义的事实是您在调用 appendChild 时出现错误的原因。这肯定是我在 Firebug 控制台中发现的第一个错误。以下准系统序列适用于 Firefox（对不起，我没有 Chrome）：

    var json =[
        {"pictureURL":"/test1.jpg/","title":"test1"},
        {"pictureURL":"/test2.jpg/", "title":"test2"},
        {"pictureURL":"/test3.jpg", "title":"test3"}
    ];
    function displayBook(title){
        alert(title);
        return false;
    }
    function addBooks(data) {
        var  newdata=document.getElementById('addBooks');
        var parent = document.getElementById('gBookList');
        var listdiv = document.createElement('li');
        listdiv.id = 'gBookListDiv';
        listdiv.innerHTML = "Books Found:";
        parent.appendChild(listdiv);
        for(var i=0;i<data.length;i++){
            var listItem = document.createElement('li');
            listItem.id = 'gBookListItem-' + i;
            parent.appendChild(listItem);
            var link = document.createElement('a');
            link.id = listItem.id + "-link";
            link.href = '#FindBook';
            link.innerHTML = data[i].title;
            listItem.appendChild(link);
            link.setAttribute("onclick", "return displayBook('" + data[i].title + "');");
            var pic = document.createElement('img');
            pic.src = data[i].pictureURL;
        }
        var list = document.getElementById('gBookList');
    }

我从这个答案中发现JavaScript: changed the value of onclick with or without jQuery我必须使用 setAttribute 来添加 onclick 处理程序。我习惯于id直接添加其他属性，如 adeneo 提到的，而不调用 setAttribute。

于 2012-07-24T01:18:01.637 回答