Jquery analyse le processus de données au format Json code_jquery

Aujourd'hui, j'ai appris un peu plus sur Json. JSON (JavaScript Object Notation) est un format d'échange de données léger. Facile à lire et à écrire pour les humains. Il est également facile à analyser et à générer pour les machines. JSON utilise un format de texte totalement indépendant du langage, mais utilise également des conventions similaires à la famille des langages C (notamment C, C, C#, Java, JavaScript, Perl, Python, etc.). Ces propriétés font de JSON un langage d'échange de données idéal.

JSON est construit à partir de deux structures :

Une collection de paires nom/valeur. Dans différentes langues, il est compris comme un objet, un enregistrement, une structure, un dictionnaire, une table de hachage, une liste à clés ou un tableau associatif).
Une liste ordonnée de valeurs. Dans la plupart des langues, il s'agit d'un tableau.

Ce sont des structures de données courantes. En fait, la plupart des langages informatiques modernes les prennent en charge sous une forme ou une autre. Cela permet d'échanger un format de données entre des langages de programmation également basés sur ces structures.

JSON a les formes suivantes :

Un objet est une collection non ordonnée de paires nom/valeur. Un objet commence par "{" (crochet gauche) et se termine par "}" (crochet droit). Chaque "nom" est suivi d'un ":" (deux-points) ; les paires "nom/valeur" sont séparées par un "," (virgule).

Bon, ne disons pas de bêtises et passons directement aux exemples ! ! La conception de cette petite démo est la suivante. La page index.jsp accède au servlet côté serveur. Le servlet transfère les données vers index.jsp. Les données transférées sont au format Json... C'est absurde. au format Json, j'écrirai cet article. Un blog équivaut à tromper le public !

Code côté index.jsp (ordre facile d'abord, puis difficile) :

Copier le code Le code est le suivant :

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() " ://" request.getServerName() ": request.getServerPort() chemin "/"; %> < html> content="no-cache"> méta http-equiv="expire" content="0"> http-equiv="mots-clés" content="mot-clé1,mot-clé2,mot-clé3"> " type="text/css" href="styles.css" mce_href="styles.css"> --> td1"> ;td id="td0"> ;/table>
Ensuite, il existe deux programmes de beans : Personne et Adresse. Ces deux classes sont conçues ici principalement pour mieux refléter la manière dont Json transmet les données et le format des données transmises

Copier le code Le code est le suivant :

paquet com.wk ; public class Person {private String firstName ; chaîne privée nom de famille ; adresse privée; Personne publique() { super(); } public Person(String firstName, String lastName, Adresse adresse) { super(); this.firstName = prénom; this.lastName = lastName; this.address = adresse ; } public String getFirstName() { return firstName ; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return nom de famille ; } public void setLastName(String lastName) { this.lastName = lastName; } adresse publique getAddress() { adresse de retour ; } public void setAddress (adresse adresse) { this.address = adresse ; } } paquet com.wk ; adresse de classe publique { identifiant int privé ; Détail de la chaîne privée ; Adresse publique() { super(); } adresse publique (identifiant int, détail de la chaîne) { super (); this.id = identifiant; this.detail = détail ; } public int getId() { identifiant de retour ; } public void setId(int id) { this.id = id; } public String getDetail() { return detail; } public void setDetail (String détail) { this.detail = détail ; } >

servlet代码：

复制代码 代码如下 :

paquet com.servlet ; importer java.io.IOException ; importer java.io.PrintWriter ; importer java.util.ArrayList ; importer java.util.List ; importer javax.servlet.ServletException ; importer javax.servlet.http.HttpServlet ; importer javax.servlet.http.HttpServletRequest ; importer javax.servlet.http.HttpServletResponse ; importer com.wk.Address ; importer com.wk.Person ; la classe publique PersonServlet étend HttpServlet {privé statique final long serialVersionUID = 1L ; StringBuffer statique bf ; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/html;charset=utf-8"); Liste personnes = new ArrayList(); PrintWriter out = resp.getWriter();
Personne personne1 = nouvelle Personne(); Adresse a1 = nouvelle adresse (); a1.setId(1); a1.setDetail("河北省"); person1.setFirstName("瓜"); person1.setLastName("傻"); personne1.setAddress(a1); personnes.add(personne1);
Personne personne2 = nouvelle Personne(); Adresse a2 = nouvelle adresse (); a2.setId(2); a2.setDetail("江西省"); person2.setFirstName("蛋"); person2.setLastName("笨"); personne2.setAddress(a2); personnes.add(person2);
Personne personne3 = nouvelle Personne(); Adresse a3 = nouvelle adresse (); a3.setId(1); a3.setDetail("湖南省"); person3.setFirstName("痴"); person3.setLastName("白"); personne3.setAddress(a3); personnes.add(person3);
bf = nouveau StringBuffer();
/* 组装成json格式的字符串 * {"person":[ * {"firstname":"", "lastNmae":"", "address": {"id":"", "detail":"" }}, * ]} */ bf.append("{"personne":["); for(Personne personne : personnes) { bf.append("{"firstname":"").append(person.getFirstName()).append("",""). append("lastname":""). append(person.getLastName()).append("","). append(""adresse":").append("{"id":"").append(person.getAddress().getId()).append("",""). append("detail": "").append(person.getAddress().getDetail()).append(""").append("}},"); } //将最后一个逗号去掉 int length = bf.length(); Chaîne newStr = bf.substring(0, longueur-1); bf = nouveau StringBuffer(); bf.append(newStr);
bf.append("]}"); out.println(bf); } @Override protected void doPost (HttpServletRequest req, HttpServletResponse resp) lance ServletException, IOException { this.doGet (req, resp); >

La version Jquery de Json est basée sur la démo :

复制代码 代码如下 :

$(document).ready(function() { $("table").css("border-color", "lightblue").css("border-style", "solid"); $("#head" .css("background-color", "lightblue"); $.ajax({ // url : "Json", // Type de données : "post", // Type de données : " json", timeout : 20000,// .firstname); $(dataObj.person).each(function(i, per) { $("#tr" i).find("#td0").html(per.lastname); $("#tr" i).find("#td1").html(par.firstname); $("#tr" i).find("#td2") .html(par.adresse.détail }); ; });

再贴一个运行效果吧！！

Déclaration：

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

Article précédent：Utilisez une balise pour analyser automatiquement l'analyse d'URL Exemples d'URL_compétences JavascriptArticle suivant：Utilisez une balise pour analyser automatiquement l'analyse d'URL Exemples d'URL_compétences Javascript

Articles Liés

Voir plus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved

nom	prénom	adresse
< ;/td>