JQuery getJSON-Beispiel

JSON steht für JavaScript Object Notation, ein leichtes Datenaustauschformat, das zum Austausch von Textinformationen verwendet wird. Die jQuery getJSON() Die Methode greift mithilfe der GET-HTTP-Anfrage vom entfernten Standort aus auf die Daten von JSON zu und wird auch zum unabhängigen Übertragen und Speichern der Daten verwendet. Es enthält die URL, an die die Anfrage an den Server gesendet wird, und die Rückruffunktion wird ausgeführt, wenn die Anfrage erfolgreich ist.

  • Einführung in JQuery
  • Suchen nach doppelten Eingabeelementen mit jQuery

JQuery getJSON-Syntax

$.getJSON(url, [data], [callback])

Die folgenden Parameter werden von der getJSON()-Methode verwendet:

  • URL: Wird verwendet, um eine Anfrage an die spezifische URL zu senden.
  • Daten: Die angeforderten Daten, die an den Server gesendet werden müssen.
  • Ruf zurück: Es handelt sich um eine optionale Rückruffunktion, die ausgeführt wird, wenn die Daten erfolgreich geladen wurden.

JQuery getJSON-Beispiel

Erstellen Sie zunächst eine JSON-Datei und speichern Sie sie unter result.json und fügen Sie einige Inhalte hinzu, die auf die Webseite geladen werden sollen.

{
"name": "RushaliB",
"seat" : "125634",
"perc": "69%"
}

Nachdem Sie eine JSON-Datei erstellt haben, schreiben Sie den Codierungsteil für die Verarbeitung der ajaxgetJSON()-Methode und speichern Sie ihn mit .html Verlängerung. Das folgende Skript definiert die HTML-Datei.

<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<head>
<title>the title</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("button").click(function(event){
          $.getJSON("result.json", function(jd) {
             $("div").html('<p> Name: ' + jd.name + '</p>');
             $("div").append('<p>Seat No : ' + jd.seat+ '</p>');
             $("div").append('<p>Percentage: ' + jd.perc+ '</p>');
          });
      });
   });
</script>
</head>
<body>
   <div>
          jQuery ajax getJSON method example
   </div>
<button>CLICK</button>
</body>
</html>
  • Das obige Programm zeigt, wie auf die Daten von zugegriffen werden kann JSON Klicken Sie dazu auf die Schaltfläche auf dem Server, um die Datei auf dem Server herunterzuladen.
  • $(“button”).click(function(event){ }); Zeile definiert ein Klickereignis, das auftritt, wenn auf die Schaltfläche geklickt wird.
  • $.getJSON(“result.json”, function(jd) {}); Die Zeile gibt die getJSON()-Methode für den Zugriff auf Daten der JSON-Datei an. Der Inhalt der Datei „result.json“ wird im Browser angezeigt.
  • $(“div”).html(‚Name: ‚ + jd.name +); Zeile gibt die HTML-Methode an.
  • $(“div”).append(‚Prozentsatz: ‚ + jd.perc+); Zeile addiert den Prozentwert.

JQuery getJSON-Demo

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

JQuery ajaxgetJSON-Beispiel
JQuery ajaxgetJSON Beispiel1

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen