Maison > interface Web > js tutoriel > 2 façons d'obtenir des données json de manière asynchrone avec jQuery_jquery

2 façons d'obtenir des données json de manière asynchrone avec jQuery_jquery

WBOY
Libérer: 2016-05-16 16:38:24
original
1295 Les gens l'ont consulté

Les exemples de cet article décrivent deux façons pour jQuery d'obtenir des données json de manière asynchrone, ce qui est d'une grande valeur pratique dans le développement de programmes Web. Partagez-le avec tout le monde pour votre référence. La méthode spécifique est la suivante :

De manière générale, il existe deux façons pour jQuery d'obtenir des données json de manière asynchrone, l'une est la méthode $.getJSON et l'autre est la méthode $.ajax. Cet article utilisera ces deux méthodes pour obtenir des données json de manière asynchrone, puis les ajoutera à la page.

Créez le fichier data.json dans le répertoire racine :

{
  "one" : "Hello",
  "two" : "World"
}
Copier après la connexion

1. Obtenez des données json via la méthode $.getJSON

  <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>
Copier après la connexion

2. Obtenez des données json via la méthode $.ajax

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

Copier après la connexion

Résumé : L'utilisation de la méthode $.getJSON et de la méthode $.ajax peut obtenir le même effet. Cependant, si vous souhaitez avoir un contrôle plus détaillé sur le processus d'acquisition asynchrone, il est recommandé d'utiliser le $. méthode ajax.

Je crois que ce qui est décrit dans cet article a une certaine valeur de référence pour la programmation jQuery de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal