0
私はオンラインコースを受講しています。私たちがしなければならないことの1つは、localhost：8080/tasksからJSONエントリをプリントアウトすることです。私がlocalhost：8080に行くと、以下のコードを実行することになっています。しかし、私はそれを実行したときに、私はこの応答を取得する：あなたが、フォールバックとしてこれを見ているようサーバーからのJSONデータの取得方法と取得方法
ホワイトレーベルのエラーページ は、このアプリケーションは、のために/エラー明示的なマッピングを持っていません。 Sat Dec 03 19:04:16 EST 2016 予期しないエラーが発生しました（type = Internal Server Error、status = 500）。文書を解析 例外：テンプレート= "タスク"、ライン28 - （xmlHttp.readyStateの== 4 & & xmlHttp.statusの== 200）場合、列42
カラム42は
ある
<!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がありますペニング？
タスク：
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;
}
}
実際のエラーメッセージを表示するようにサーバーを構成します。 – SLaks
問題はクライアント側ではなくサーバー側で発生します。 – Dekel
スラーク私はそれをする方法を知らない？あなたはjsonデータを参照することを意味しますか？それは：{{"id"： "809b7e46-98b2-43a0-98ec-38d89f925a1e"、 "name"： "Fix me。"}] – yasgur99