Wie man JSON-Daten von einem Server bekommt und abruft

Ich mache einen Online-Kurs und eine der Sachen, die wir tun müssen, ist die JSON-Einträge von localhost: 8080/tasks auszudrucken. Wenn ich zu localhost: 8080 gehe, soll es diesen Code unten laufen lassen. Allerdings, wenn ich es laufen bekomme ich diese Antwort:Wie man JSON-Daten von einem Server bekommt und abruft

Whitelabel Fehler Seite Diese Anwendung für/Fehler keine explizite Zuordnung hat, so können Sie diese als Ausweich sehen. Sait Dez 03 19:04:16 EST 2016 Es ist ein unerwarteter Fehler aufgetreten (Typ = Interner Serverfehler, Status = 500). Exception-Parsing-Dokument: template = "Tasks", Zeile 28 - Spalte 42

Säule 42 ist

if (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>

warum ist das hap Penen?

Aufgaben:

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

Aufgaben Controller:

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

Quelle

2016-12-04 yasgur99

Konfigurieren Sie Ihren Server so, dass die tatsächliche Fehlermeldung angezeigt wird. – SLaks

Das Problem ist mit der Server-Seite, nicht mit der Client-Seite. – Dekel

Slaks ich weiß nicht, wie das geht? meinst du die json daten sehen, es ist: [{"id": "809b7e46-98b2-43a0-98ec-38d89f925a1e", "name": "Fix mich."}] – yasgur99

Sieht aus wie Sie verpasst ';' am Ende der

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

Quelle

2016-12-04 00:57:43 Xinzoop

hinzugefügt ich habe geändert, dass es nichts getan hat :( – yasgur99

Sie verpasst am Ende? – Xinzoop

Thymeleaf erfordert gültigen XML, und auf der Linie geschrieben, Sie haben:

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

Die & ist kein gültiges XML-Zeichen, so müssen Sie entweder Ihr Javascript umgeben mit CDATA wie folgt aus:

<script> 
// <![CDATA[ 

... javascript here ...  

// ]]> 
</script>

Oder ersetzen sie durch &&

Quelle

2016-12-04 05:10:48 Metroids

Wie man JSON-Daten von einem Server bekommt und abruft

Antwort

Verwandte Themen