在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
                     }
                 }

              }
          }
    }
}