如何從服務器檢索JSON數據

我正在參加在線課程，我們必須做的其中一件事是從localhost：8080/tasks中打印出JSON條目。當我去localhost：8080時，它應該運行下面的代碼。然而，當我運行它，我得到這樣的響應：如何從服務器檢索JSON數據

白色標籤錯誤頁面此應用對/錯誤沒有明確的映射，所以你看到這個作爲後備。 Sat Dec 03 19:04:16 EST 2016 有一個意外的錯誤（type = Internal Server Error，status = 500）。異常解析文件：模板= 「任務」，第28行 - 列42

塔42是

如果（xmlHttp.readyState == 4 & & xmlHttp.status == 200）

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 
<head lang="en"> 

    <meta charset="UTF-8" /> 

</head> 
<body> 

    <h2>Tasks</h2> 

    <!-- TODO: add the ability to list tasks --> 
    <ul id="tasks"> 
    </ul> 


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

    <!-- the javascript has been embedded to the same site --> 
    <script th:inline="javascript"> 
     // The URL to the application server that holds the tasks. 
     var url = "localhost:8080/tasks"; 

     var xmlHttp = new XMLHttpRequest(); 
     xmlHttp.onreadystatechange = function() { 
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
     var response = JSON.parse(xmlHttp.responseText); 
     var liElement = document.createElement("li"); 
     liElement.appendChild(document.createTextNode(response.name)); 
     document.querySelector("#tasks").appendChild(liElement); 
     } 

     xmlHttp.open("GET", url, true); 
     xmlHttp.send(null); 
     } 

     function loadTasks() { 
     } 

     function addTask() { 
     var name = document.querySelector("#name").value; 
     if (!name) { 
     return; 
     } 

     console.log(name); 

     var http = new XMLHttpRequest(); 
     http.open("POST", url, true); 
     http.setRequestHeader("Content-type", "application/json"); 
     var data = new Object(); 
     data.name = name; 

     http.onreadystatechange = function() { 
     if (http.readyState === 4) { 
     if (http.status === 200) { 
     addTaskToList(JSON.parse(http.responseText)); 
     } 
     } 
     } 

     http.send(JSON.stringify(data)); 
     } 


     function addTaskToList(task) { 
     var liElement = document.createElement("li"); 
     liElement.appendChild(document.createTextNode(task.name)); 
     document.querySelector("#tasks").appendChild(liElement); 
     } 


     window.onload = function() { 
     loadTasks(); 
     }; 
    </script> 
</body>

這是爲什麼HAP pening？

任務：

package sec.domain; 

import java.util.UUID; 

public class Task { 

private String id; 
private String name; 

public Task() { 
    this.id = UUID.randomUUID().toString(); 
} 

public String getId() { 
    return id; 
} 

public void setId(String id) { 
    this.id = id; 
} 

public String getName() { 
    return name; 
} 

public void setName(String name) { 
    this.name = name; 
}

任務控制器：

package sec.controller; 
import java.util.ArrayList; 
import java.util.List; 
import org.springframework.web.bind.annotation.PathVariable; 
import org.springframework.web.bind.annotation.RequestBody; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.bind.annotation.RestController; 
import sec.domain.Task; 

@RestController 
@RequestMapping("/tasks") 
public class TaskController { 

private List<Task> tasks; 

public TaskController() { 
    this.tasks = new ArrayList<>(); 
    Task fixme = new Task(); 
    fixme.setName("Fix me."); 
    this.tasks.add(fixme); 
} 

@RequestMapping(method = RequestMethod.GET) 
public List<Task> list() { 
    return this.tasks; 
} 

@RequestMapping(method = RequestMethod.POST) 
public Task add(@RequestBody Task task) { 
    this.tasks.add(task); 
    return task; 
} 

@RequestMapping(value = "/{id}", method = RequestMethod.DELETE) 
public Task delete(@PathVariable String id) { 
    Task t = this.tasks.stream().filter(task -> task.getId().equals(id)).findFirst().get(); 
    this.tasks.remove(t); 
    return t; 
} 
}

來源

2016-12-04 yasgur99

配置您的服務器以顯示實際的錯誤消息。 – SLaks

問題出在服務器端，而不是客戶端。 – Dekel

Slaks我不知道該怎麼做？你的意思是看到json的數據，它是：[{「id」：「809b7e46-98b2-43a0-98ec-38d89f925a1e」，「name」：「Fix me。」}] – yasgur99

看起來你錯過了 ';'在

http.onreadystatechange = function() { 
    if (http.readyState === 4) { 
    if (http.status === 200) { 
    addTaskToList(JSON.parse(http.responseText)); 
    } 
    } 
    }

來源

2016-12-04 00:57:43 Xinzoop

中加入了它，我改變了它沒有做任何事情:( – yasgur99

你錯過了最後？ – Xinzoop

Thymeleaf年底需要有效的XML，並就行了，你發佈你：

if (xmlHttp.readyState == 4 && xmlHttp.status == 200)

的&不是有效的XML字符，所以你需要或者圍繞您的JavaScript與CDATA這樣的：

<script> 
// <![CDATA[ 

... javascript here ...  

// ]]> 
</script>

或者與替換它們&&

來源

2016-12-04 05:10:48 Metroids

如何從服務器檢索JSON數據

回答

相關問題