Heim > Web-Frontend > js-Tutorial > Hauptteil

2 Möglichkeiten, JSON-Daten asynchron mit jQuery_jquery abzurufen

WBOY
Freigeben: 2016-05-16 16:38:24
Original
1271 Leute haben es durchsucht

Die Beispiele in diesem Artikel beschreiben zwei Möglichkeiten für jQuery, JSON-Daten asynchron abzurufen, was für die Entwicklung von Webprogrammen von großem praktischen Wert ist. Teilen Sie es als Referenz mit allen. Die spezifische Methode ist wie folgt:

Im Allgemeinen gibt es für jQuery zwei Möglichkeiten, JSON-Daten asynchron abzurufen: die Methode $.getJSON und die Methode $.ajax. In diesem Artikel werden diese beiden Methoden verwendet, um JSON-Daten asynchron abzurufen und sie dann an die Seite anzuhängen.

Erstellen Sie die Datei data.json im Stammverzeichnis:

{
  "one" : "Hello",
  "two" : "World"
}
Nach dem Login kopieren

1. Erhalten Sie JSON-Daten über die $.getJSON-Methode

  <script src="Scripts/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $.getJSON('data.json', function(data) {
        var items = [];
        $.each(data, function(key, val) {
          items.push('<li id="' + key + '">' + val + '</li>');
        });
        $('<ul/>', {
          'class': 'list',
          html: items.join('')
        }).appendTo('body');
      });
    });
  </script>
Nach dem Login kopieren

2. Erhalten Sie JSON-Daten über die $.ajax-Methode

  <script src="Scripts/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $.ajax({
        url: 'data.json',
        dataType: 'json',
        success: function(data) {
          var items = [];
          $.each(data, function(key, val) {
            items.push('<li id="' + key + '">' + val + '</li>');
          });
          $('<ul/>', {
            'class': 'list',
            html: items.join('')
          }).appendTo('body');
        },
        statusCode: {
          404: function() {
            alert("没有找到相关文件~~");
          }
        }
      });
    });
  </script>

Nach dem Login kopieren

Zusammenfassung: Mit der Methode $.getJSON und der Methode $.ajax kann der gleiche Effekt erzielt werden. Wenn Sie jedoch eine detailliertere Kontrolle über den asynchronen Erfassungsprozess haben möchten, wird empfohlen, die Methode $.getJSON zu verwenden. Ajax-Methode.

Ich glaube, dass das, was in diesem Artikel beschrieben wird, einen gewissen Referenzwert für die jQuery-Programmierung aller hat.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!