在JavaScript中使用XMLlHttpRequest检索服务器端数据，并在新创建的li元素中填充项目

Question

我对javascript有点陌生，并尝试学习一些基本操作。 我有一个动态创建的li元素，其中正在显示注释列表。

向服务器添加注释工作正常。 每个注释都有一个ID和名称值。 jason对象以[{"id":"1","name":"This is the first note"}] 。

现在，我想从服务器检索列表，并且每当用户离开该页面并再次打开该页面时，在同一页面上仅将“名称”值显示为列表。

控制器功能如下所示：

public class NoteController {

    private List<Note> notes;

    public NoteController() {
        this.notes = new ArrayList<>();
    }

    @RequestMapping(method = RequestMethod.GET)
    public List<Note> noteList() {
        return this.notes;
    }
}

这是html代码：

       <form>
            <input type="text" name="name" id="name"/>
            <input type="button" onclick="addNote();" value="Add"/>
        </form>

这是我的JavaScript代码：

        function loadNotes() {

            var HttpGET = new XMLHttpRequest();
            HttpGET.open("GET", "url", true);
            HttpGET.onreadystatechange = function() {

                if (HttpGET.readyState === 4) {
                    if (HttpGET.status === 200) {

                    var response = JSON.parse(HttpGET.responseText);
                    var loadListElement = document.createElement("li");

                 loadListElement.appendChild(document.createTextNode("name"));
                                                         document.querySelector("#notes").appendChild(loadListElement);
                    document.querySelector("#notes").innerHTML = response.value.notes;
                    }
                }
            }

            HttpGET.send(null);
        }

javascript代码无法正常工作。 Json数据应显示在其子节点li内的ul元素内。 但是关闭页面或重新加载时什么也看不到。 我想我不确定在loadTasks函数中是否正确使用了响应值。 另外，我还要注意是否在document.createTextNode（“ name”）中正确创建了文本节点。 还是我错过了什么？ 请帮助我解决这个问题。 我已经花了很多时间在此上，除了在stackoverflow中敲打我的头之外，别无选择。

Answer 1

根据您的评论，我想您会以以下格式获得答复

    [
      {"id":"9d0962e8-e1f5-4b61-85ed-489dbc6d5bb2","name":"Runnin‌​g"},
      {"id":"82e1ad1a-‌​9bfb-490f-8f95-90139‌​dfe6790","name":"Sle‌​eping"}
    ]

现在您的代码应如下所示

xmlHttp.onreadystatechange = function() {    
    if (xmlHttp.readyState === 4) {
          if (xmlHttp.status === 200) { 
              if(xmlHttp.responseText){// check for response
                 var response = JSON.parse(xmlHttp.responseText);
                 for(var note in response){ //iterate over response object
                     if(response.hasOwnProperty(note)){ //check whether note is a property of response object
                        var loadListElement = document.createElement("li");
                        loadListElement.appendChild(document.createTextNode(response‌​[note].name)); //use note's name property to get actual text
                        document.querySelector("#notes").appendChild(loadListElement);//append the element
                     }
                 }

              }
          }
    }
}