10 données JSON avec les plugins JQuery, les scripts et les TUT

Les plats clés

• Ce message présente 10 données JSON avec des plugins JQuery, des scripts et des TUT, fournissant des moyens de créer des éléments Web dynamiques tels qu'un graphique à barres avec des effets d'animation de type flash, un widget Web ou une interface de grille de type mosaïque pour les images.
• Le message propose également une section FAQ complète répondant aux requêtes communes sur les données JSON et JQuery, y compris comment analyser les données JSON, utiliser une visionneuse JSON, gérer les erreurs lors de l'analyse et faire des demandes Ajax.
• Il fournit une variété d'exemples et de démonstrations pour chaque plugin, script et tutoriel, ainsi que des sources pour une exploration et un apprentissage plus approfondis.

La publication d'aujourd'hui est une collection de 10 données JSON avec des plugins JQuery, des scripts et des tuts. Apprenez à créer un graphique à barres chic avec des effets d'animation comme Flash avec DDChart (graphique à barres de forage zoomable JSON) et plus encore… profitez-en!

Posts connexes:

• Outil de visionneuse d'arborescence JSON en ligne
• 10 outils JSON en ligne

1. Chargez les données JSON avec jQuery, PHP et MySQL

Ce message montre comment remplir une boîte de sélection en fonction de la valeur d'une autre, en obtenant des données JSON avec jQuery à partir d'un script PHP qui obtient les données d'une base de données MySQL.

Démo source

2. JQUERY JSON AJAX demande et cache

Ce message examine les navigateurs cache les demandes et comment s'assurer qu'il n'est pas mis en cache.

Démo source

3. double consommer

Un plugin jQuery mettra en place une interface utilisateur qui suggère des résultats en tapant. Il affichera deux types de suggestions, d'abord (et plus rapidement) les données locales et la deuxième (et plus lente) les résultats d'une requête de recherche Ajax.

Source Démo

4. DDCHART: JSON Driven Zoomable Drill Down Bar Chart

est un plugin de graphique à barres basé sur les données JSON qui crée un graphique à barres chic avec des effets d'animation Flash.

Démo source

5. Comment créer un widget Web à l'aide de jQuery

Les points intéressants seront: > Assurez-vous que le code du widget ne gâche pas accidentellement le reste de la page, > Chargez dynamiquement les fichiers CSS et JavaScript externes, > Terger la stratégie d'origine unique des navigateurs à l'aide de JSONP.

Source Démo

6. JQuery TokenInput

Plugin jQuery qui permet à vos utilisateurs de sélectionner plusieurs éléments dans une liste prédéfinie, en utilisant l'achèvement automatique en tapant pour trouver chaque élément.

Démo source

7. jQuery Quickie

Un défilement illimité à l'aide de jQuery. J'ai utilisé l'API Twitter pour faire l'exemple, donc vous apprendrez aussi un peu sur JSON…

Source Démo

8. JQuery Chartotable Plugin

Il utilise un GP GD pour convertir un caractère en une image, puis en un objet JSON contenant la matrice de glyphe.

Source Démo

9. Flexbox - TextBox basé sur JQuery Ajax et SelectBox

Un plugin jQuery qui est destiné à être un remplacement très flexible pour les zones de texte HTML et les déroutes, en utilisant AJAX pour récupérer et lier les données JSON.

Source Démo

10. JQUERY Galerie d'images rotatives au hasard - Mosaiqy

Mosaiqy est un plugin jQuery pour présenter des images dans une interface de grille de type mosaïque. Il récupère les images d'une source de données JSON / JSONP qui facilite l'intégration avec les services d'hébergement d'images et il y a déjà des démos pour Flickr, Instagram et Panoramio.

Démo source

Questions fréquemment posées (FAQ) sur les données JSON et jQuery

Comment puis-je utiliser jQuery pour analyser les données JSON?

jQuery fournit une méthode appelée $ .parsejson () qui est utilisée pour analyser une chaîne JSON. Cette méthode prend une chaîne JSON bien formée et renvoie l'objet JavaScript résultant. La chaîne JSON doit être du texte écrit au format JSON. Voici un exemple:

var json = '{"name": "John", "Age": 30, "City": "New York"}';
var obj = $ .parsejson ( JSON);

Dans cet exemple, OBJ est un objet JavaScript auquel vous pouvez accéder comme ceci: obj.name, obj.age, obj.city.

Qu'est-ce qu'une visionneuse JSON et pourquoi en ai-je besoin?

Une visionneuse JSON est un outil qui vous permet de visualiser et d'inspecter les données JSON dans un format structuré et facile à lire. Il est particulièrement utile pour traiter de grandes quantités de données, car elle peut vous aider à comprendre la structure et le contenu des données plus facilement. Les téléspectateurs JSON fournissent souvent des fonctionnalités telles que la mise en évidence de la syntaxe, les arbres pliables et les fonctionnalités de recherche, ce qui facilite la navigation et l'analyse des données.

Comment puis-je utiliser le plugin JSON Viewer JSON JQUERY?

Le plugin JSON JSON JSON est un outil simple et facile à utiliser qui vous permet de visualiser les données JSON dans un format lisible par l'homme. Pour l'utiliser, vous devez d'abord inclure la bibliothèque JQuery et les fichiers JavaScript et CSS du plugin dans votre fichier HTML. Ensuite, vous pouvez utiliser la fonction JSONViewer () pour afficher vos données JSON. Voici un exemple:

Quelles sont les alternatives à jQuery pour consulter les données JSON?

Il existe de nombreuses alternatives à jQuery pour visualiser les données JSON. Certains populaires incluent JSONView, une extension de navigateur qui vous permet de visualiser les données JSON directement dans votre navigateur; Postman, un outil de développement d'API qui comprend une visionneuse JSON intégrée; Et des outils en ligne comme JSONLINT et JSONFormatter.

Comment puis-je gérer les erreurs lorsque l'analyse des données JSON avec jQuery?

Lorsque l'analyse des données JSON avec jQuery, des erreurs peuvent se produire si la chaîne JSON n'est pas bien formé. Vous pouvez gérer ces erreurs en utilisant un bloc de capture d'essai. Voici un exemple:

essayez {
var obj = $ .parsejson (json);
} catch (e) {
console.error ("erreur d'analyse:", e);
}

Dans cet exemple, si une erreur se produit pendant l'analyse, elle sera capturée et enregistrée à la console.

Puis-je utiliser jQuery pour faire des demandes Ajax et gérer les données JSON?

Oui, jQuery fournit plusieurs méthodes pour faire des demandes AJAX, y compris $ .ajax (), $ .get () et $ .post (). Ces méthodes peuvent gérer les données JSON en définissant l'option DataType sur "JSON". Voici un exemple:

$. Ajax ({
URL: "https://api.example.com/data",
dataType: "JSON",
Success: Fonction (Fonction (Fonction data) {
console.log (data);
}
});

Dans cet exemple, le La méthode $ .ajax () est utilisée pour faire une demande à une URL qui renvoie les données JSON. La fonction de rappel de réussite est appelée lorsque la demande est réussie, et elle enregistre les données renvoyées à la console.

Comment puis-je formater les données JSON pour les rendre plus lisibles?

Les données JSON peuvent être formaté pour le rendre plus lisible en utilisant l'espacement et l'indentation. La méthode json.stringify () dans JavaScript offre une option pour cela. Voici un exemple:

var json = {"name": "John", "Age": 30, "City": "New York"};
var Formattedjson = JSON.Strifify (JSON, null, 2);
console.log (formatedjson);

Dans cet exemple, la méthode json.strifify () est utilisée avec le troisième argument défini sur 2, ce qui signifie qu'il utilisera 2 espaces pour l'indentation.

Comment puis-je filtrer les données JSON avec jQuery?

Vous pouvez filtrer les données JSON avec jQuery en utilisant la fonction $ .grep (). Cette fonction prend un tableau et une fonction comme des arguments, et renvoie un nouveau tableau qui ne contient que les éléments pour lesquels la fonction renvoie vrai. Voici un exemple:

var data = [
{"name": "John", "Age": 30, "City": "New York"},
{"name": "Jane", "Age": 25, "City": "Chicago"},
{"Name": "Bob", "Age": 35, "City": "los Angeles "}
];
var filteredData = $ .Grep (data, fonction (item) {
return item.age> 30;
});

dans cet exemple , la fonction $ .Grep () est utilisée pour filtrer le tableau de données et retourner uniquement les éléments où l'âge est supérieur à 30.

Puis-je utiliser jQuery pour convertir un Objet JavaScript à une chaîne JSON?

Oui, vous pouvez utiliser la méthode json.stringify () dans JavaScript pour convertir un objet JavaScript en une chaîne JSON. Voici un exemple:

var obj = {"name": "John", "Age": 30, "City": "New York"};
var JSON = JSON.Strifify (obj) ;

Dans cet exemple, la méthode json.strifify () est utilisée pour convertir l'objet OBJ en une chaîne JSON.

Comment puis-je valider JSON Les données?

Les données JSON peuvent être validées à l'aide de divers outils et bibliothèques. Un outil en ligne populaire est Jsonlint, qui vous permet de coller vos données JSON et de les vérifier pour les erreurs. Dans JavaScript, vous pouvez utiliser un bloc d'essai avec la méthode JSON.Parse () pour vérifier si une chaîne JSON est bien formée. Voici un exemple:

essayez {
json.parse (json);
console.log ("valide json");
} catch (e) {
console.log ("JSON invalide");
}

Dans cet exemple, si la méthode json.parse () lance une erreur, cela signifie que le JSON La chaîne n'est pas bien formée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!