Comment faire pour récupérer les résultats d'appels AJAX avec javascript

Il est temps de construire quelques applications javascript pour voir ce que jQuery peut faire pour vous lorsque vous récupérez les résultats de appels AJAX. Bien que vos situations du monde réel seront plus complexes, le processus va être la même chose.

Comment travailler avec la sortie standard

Cet exemple utilise la DoMath.php script pour effectuer les mathématiques et changer simplement le champ d'un formulaire de résultat sur une page. Vous devez utiliser votre configuration du serveur pour que cet exemple fonctionne parce que le serveur exécute le script PHP et retourne le résultat. En utilisant jQuery rend le processus de travailler avec AJAX beaucoup plus facile. Le code suivant montre la forme utilisée pour cette tâche.

L'exemple utilise la norme contrôle pour l'entrée de données. Notez que vous devez définir le nom attributs pour ces contrôles, ou jQuery .serialize () méthode ne fonctionnera pas. Il est une bonne idée d'affecter les valeurs des contrôles par défaut. La sortie est un simple .

L'application effectue sa tâche lorsque l'utilisateur clique sur Ajouter les nombres, qui est un contrôle. Cette approche offre une alternative à l'aide d'un bouton de soumission style. Cependant, l'autre approche fonctionne aussi bien. L'avantage de cette approche est que vous pouvez utiliser une fonction nommée, PerformAdd (), pour gérer le clic événement. Le code suivant montre comment PerformAdd () fait son travail:

PerformAdd fonction () {$ ("#result") .load ("http: //localhost/DoMath.php", $ ("#DataEntry") .serialize ()) -}

L'exemple met la sortie dans un avec un id de résultat. Vous accédez à ce par son identifiant et appel load () de le remplir avec des informations provenant de la source souhaitée. Vous fournissez l'emplacement de la source, qui est DoMath.php.

Le script PHP nécessite des données d'entrée, qui vous ajouter comme deuxième argument. Pour obtenir les données, vous accédez à la balise, qui a un identificateur de DataEntry, et que vous appelez serialize (), qui sérialise chaque contrôle qui a un nom attribuer lui est affecté. Lorsque vous utilisez les valeurs par défaut, les données sérialisé est val1 = 1val2 = 2. Pris ensemble, l'URL complète est http:? //localhost/DoMath.php val1 = 1val2 = 2.

Les avantages de JSON

Travailler avec XML fournit une multi-plateforme, solution multi-navigateur pour stocker des données qui fonctionne également avec à peu près tout langage de programmation sur la planète. Il est vraiment pas possible d'obtenir plus générique que XML. XML peut être difficile à analyser en une forme que l'ordinateur peut comprendre. Par conséquent, les développeurs ont cherché un moyen plus facile à stocker des données complexes. javascript Object Notation (JSON) est l'une des nouvelles solutions.

Comme XML, JSON travaille avec toute plate-forme et avec tous les navigateurs. En utilisant jQuery rend le travail avec JSON facile. Curieusement, PHP fournit les fonctions requises pour traduire les données PHP complexes en un format JSON.

Comment faire pour créer les données JSON

Comme son nom l'indique, JSON repose sur des objets javascript afin de stocker des informations. Vous utilisez réellement littéraux d'objet pour stocker des données.

Cet exemple stocke les données JSON sur disque dans un fichier.

{"Utilisateurs": [{"Nom": "George Smith", "Nombre": 28 "anniversaire": "/ Date (377244000000) /"}, {"Nom": "Amy Jones", "Nombre": 41, "anniversaire": "/ Date (414914400000) /"}, {"Nom": "Sammy Wang", "Nombre": 33 "anniversaire": "/ Date (-147 380 400 000) /"}]}

Les données se compose d'un groupe d'utilisateurs. Il ya trois utilisateurs dans le fichier. Chaque entrée de l'utilisateur a les mêmes champs qui lui sont associés: Nom, Nombre, et Anniversaire. Notez que les chaînes apparaissent entre guillemets. Numéros apparaissent sans guillemets. JSON ne fournit pas réellement un soutien pour les types d'objets standard, de sorte que cet exemple utilise un des types que vous voyez souvent.

Si ce fichier contient une valeur booléenne, il semblerait que vrai ou faux sans citations. En somme, JSON supporte ces types de données:

• Chaîne

• Nombre

• Boolean

• nul

En outre, les fichiers JSON prennent en charge deux types de structure: littéral d'objet et de tableau. Cet exemple montre les deux types de structure pour vous afin que vous savez comment les manipuler en utilisant javascript jQuery.

Comment afficher les données à l'écran JSON

La forme de cet exemple comprend le titre et une contrôle. Lorsque l'utilisateur clique sur le bouton, il appelle ViewData, qui est représenté sur l'exemple de code suivant.

ViewData fonction () {// Obtenir les données du disque $ getJSON ("Test.json", function (données) {// Créer un tableau pour contenir les éléments de data.var = [] -.. // analyser les données par regardant // chaque entrée dans les Utilisateurs objet. $. chacun (data.Users, la fonction (clé, valeur) {items.push ("
"+ + Value.Name"
"+ + Value.Number"
"+ (New Date (parseInt (value.Birthday.substr (6)))). ToDateString () +"
") -}) - // Placer le résultat dans une liste non ordonnée $ ('.
', {Html: items.join ("")}.) AppendTo («corps») -}) -}

L'exemple commence en appelant .getJSON (), qui charge Test.json à partir du lecteur et place le contenu données. La fonction anonyme accepte données en entrée. Pour créer la sortie de cet exemple, le code crée un tableau vide, articles. Utilisation articles simplifie le code.

L'étape suivante consiste à traiter les données de chaque utilisateur dans le Utilisateurs tableau trouvé dans Test.json. Les appels de code .each () et le transmet data.Users, de sorte que la boucle traite chacun des littéraux d'objets qu'il contient. La fonction anonyme reçoit une clé et valeur paire pour chacune des entrées de l'utilisateur.

Pour accéder à chacune des paires clé / valeur de l'objet entrées littérales, vous interagissez avec les propriétés appropriées: Nom, Nombre, et Anniversaire. Traitement Nom et Nombre est simple - il suffit de les passer à la sortie en est.

Pour traiter la date de .NET bizarre, vous devez séparer la partie texte de la partie numérique de la chaîne, puis transformer cette valeur en un entier qui contient le nombre de millisecondes depuis le 1er Janvier 1970.

Si vous voulez fournir une date antérieure au 1 er Janvier 1970, vous utilisez un nombre négatif de millisecondes. Le nombre de millisecondes est utilisé pour créer un new Date () objet. Les appels de code toDateString () pour fournir une sortie plus joli.

À ce point, articles contient trois éléments du tableau, dont chacun est un élément de liste

tag contenant des faits sur les utilisateurs. Le code crée une nouvelle liste à puces

tag et lieux articles l'intérieur en appelant join (). La liste obtenue est ajoutée au document actuel en utilisant le appendTo () Procédé.