2017-08-10 5 views
0

Ich versuche, aus einer sehr einfachen Webseite in Anthor ein wechseln, aber ich Gesicht einige Probleme mit dem Ergebnis, sobald ich auf klicken getAllProblem mit meiner Funktion in meinem JavaScript

Meine bisherigen Webseite (die wroking one)

Hier
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 
<body> 
    <button onclick="getAll()"> Get All The Users </button> 

    <div id="users"></div> 

    <script> 
     function getAll() 

     { 
      $("#users").html(""); 



      $.getJSON("http://localhost:8080/users", function(data) 
      { 
       for (var i in data) { 
        $('#users').append("<p>ID: " + data[i].id + "</p>") 
        $('#users').append("<p>First name: " + data[i].fname + "</p>") 
        $('#users').append("<p>Last name: " + data[i].lname + "</p><br>") 
       } 
      }); 

     } 

    </script> 
</body> 
</html> 

ist der Fehler:

Uncaught ReferenceError: getAll is not defined 
    at HTMLButtonElement.onclick (testt.html:96) 
onclick @ @ testt.html:96 
testt.html:145 

Uncaught ReferenceError: screenfull is not defined 
    at HTMLDivElement.<anonymous> (testt.html:145) 
(anonymous) @ testt.html:145 

EDITED Nach Ninas Antwort i erhält das gewünschte Ergebnis, aber die Homepage wie folgt aussieht:

The result

So verzerrt er den oberen Teil meiner Homepage.

+0

_ "getAll ist nicht definiert" _ - Wenn Sie die "Old School" -Ereignisbehandlung über HTML-Attribute verwenden, muss die Funktion vorhanden sein, bevor dieses Element im DOM auftritt. Aber da Sie jQuery bereits verwenden, sollten Sie sich lieber mit dem Button-Klick-Event beschäftigen. – CBroe

Antwort

1

Sie benötigen

<div id="requestfs">/div> 

zu

<div id="requestfs"></div> 

Und Sie müssen sich ändern Sie diese Zeile

$.getJSON("http://localhost:8080/users" , function(data[i]) 
//              ^^^ 

bis (ohne Index)

01 ändern
$.getJSON("http://localhost:8080/users" , function(data) 

Mindestens müssen Sie die Bibliothek irgendwo einschließen, bevor Sie es.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Optional Sie den Typ als auch

<script type="text/javascript"> 
+0

Text/Javascript wird vorausgesetzt, wenn nicht angegeben. Das ist nicht nötig. – jhpratt

+0

vielleicht stellst du den Hintergrund zuerst ... –

0

Wenn Sie eine Funktion deklarieren Attribut verwenden könnte, sollte die { mit dem function Schlüsselwort auf der gleichen Linie sein. Zum Beispiel:

function foo() { 

} 

Sie sollten alle diese ändern (beachten Sie, sie sind in Zeile 110 und Zeile 20).


Als nächstes in der Linie

$.getJSON("http://localhost:8080/users" , function(data[i]) { 

function (data[i]) sollte function (data)


auch sein, erinnere mich an die jQuery-Bibliothek aufzunehmen.

+1

_ "Wenn du eine Funktion deklarierst, sollte das {in der gleichen Zeile mit dem Funktionsschlüsselwort" _ sein - das ist nur eine Kodierungskonvention, hat aber nichts mit dem Problem zu tun. Beide Varianten sind gültig JS. – CBroe

+0

Nun, es hat eine Ausnahme, wenn Sie das 'return' Schlüsselwort verwenden, um ein Objekt zurückzugeben, wird es einen Fehler verursachen (und es ist sehr schwer zu finden). Es ist eine gute Programmierpraxis. Siehe https://www.youtube.com/watch?v=taaEzHI9xyY&list=PL62E185BB8577B63D&index=14 um 19:58 Uhr. –