JSON (JavaScript Object Notation, JS object notation) est un format d'échange de données léger, facile à lire et à écrire, et facile à analyser et à générer par machine. JSON utilise un format de texte totalement indépendant de la langue. De nombreuses langues prennent en charge JSON, donc JSON est un excellent langage d'échange de données (entre client et serveur).

Il est basé sur un sous-ensemble d'ECMAScript et utilise un format de texte totalement indépendant du langage de programmation pour stocker et représenter les données. La structure hiérarchique concise et claire fait de JSON un langage d'échange de données idéal. Il est facile à lire et à écrire pour les gens, mais également facile à analyser et à générer par la machine, et à améliorer efficacement l'efficacité de la transmission réseau.

Le JSON: J AVA S cript O bjet N ottaison (le JavaScript Object Notation)

JSON est une grammaire pour stocker et échanger des informations textuelles. Similaire à XML.

JSON est plus petit, plus rapide et plus facile à analyser que XML.

Identique à XML

JSON est du texte brut
JSON est "auto-descriptif" (lisible par l'homme)
JSON a une structure hiérarchique (il y a une valeur dans la valeur)
JSON peut être analysé par JavaScript
Les données JSON peuvent être transmises à l'aide d'AJAX

Différence avec XML

Pas de balise de fermeture
Plus court
Lecture et écriture plus rapides
Capable d'utiliser la méthode JavaScript eval () intégrée pour l'analyse
Utiliser un tableau
N'utilisez pas de mots réservés

Pourquoi utiliser JSON?

Pour les applications AJAX, JSON est plus rapide et plus facile à utiliser que XML:

Utiliser XML

Lire le document XML
Utilisez XML DOM pour parcourir le document
Lisez la valeur et stockez-la dans une variable

Utilisez JSON

Lire la chaîne JSON
Utilisez eval () pour traiter les chaînes JSON

Pourquoi JSON est-il meilleur que XML?

XML est plus difficile à analyser que JSON.

JSON peut être analysé directement à l'aide d'objets JavaScript existants.

Pour les applications AJAX, JSON est plus rapide et plus simple que le chargement de données XML:

Utiliser XML

Obtenez le document XML
Utilisez XML DOM pour parcourir les documents
Analyser les données et les copier dans la variable

Utilisez JSON

Obtenir la chaîne JSON
JSON.Parse analyse les chaînes JSON

Syntaxe JSON

La syntaxe JSON est un sous-ensemble de la syntaxe JavaScript.

Règles de syntaxe JSON

La syntaxe JSON est un sous-ensemble de la syntaxe de représentation d'objets JavaScript.

Les données sont dans des paires nom / valeur
Les données sont séparées par une virgule
Les accolades enregistrent des objets
Les parenthèses enregistrent le tableau

Paires nom / valeur JSON

Le format d'écriture des données JSON est: paires nom / valeur.

La paire nom / valeur comprend le nom du champ (entre guillemets doubles), suivi de deux points, puis de la valeur:

"name" : "程序猿"

Ceci est facile à comprendre et équivaut à cette déclaration JavaScript:

name = "程序猿"

Valeur JSON

La valeur JSON peut être:

Nombre (entier ou virgule flottante)
Chaîne (entre guillemets)
Valeur logique (vrai ou faux)
Tableau (entre crochets)
Objet (entre accolades)
nul

Numéro JSON

Les nombres JSON peuvent être des nombres entiers ou flottants:

{ "age":30 }

Objet JSON

L'objet JSON est écrit entre accolades ({}):

Les objets peuvent contenir plusieurs paires nom / valeur:

{ "name":"程序猿" , "url":"www.runoob.com" }

Ceci est également facile à comprendre et équivaut à cette déclaration JavaScript:

name = "程序猿" url = "www.runoob.com"

Tableau JSON

Le tableau JSON est écrit entre crochets:

Le tableau peut contenir plusieurs objets:

{ "sites": [ { "name":"程序猿" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
 { "name":"微博" , "url":"www.weibo.com" } ] }

Dans l'exemple ci-dessus, l'objet "sites" est un tableau contenant trois objets. Chaque objet représente un enregistrement sur un certain site Web (nom, URL).

JSON booléen

Les valeurs booléennes JSON peuvent être vraies ou fausses:

{ "flag":true }

JSON nul

JSON peut définir une valeur nulle:

{"runoob": null}

JSON utilise la syntaxe JavaScript

Étant donné que JSON utilise la syntaxe JavaScript, il peut traiter JSON en JavaScript sans logiciel supplémentaire.

Avec JavaScript, vous pouvez créer un tableau d'objets et attribuer des valeurs comme celle-ci:

Exemple

var sites = [ { "name":"runoob" , "url":"www.runoob.com" },
 { "name":"google" , "url":"www.google.com" }, 
{ "name":"微博" , "url":"www.weibo.com" } ];

Le premier élément du tableau d'objets JavaScript est accessible comme ceci (l'index commence à 0):

sites [0] .name;

Le contenu renvoyé est:

runoob

Vous pouvez modifier les données comme ceci:

sites[0].name="程序猿";

Objet JSON

Syntaxe des objets

Exemple

{ "name":"runoob", "alexa":10000, "site":null }

Les objets JSON sont écrits entre accolades ({}).

Les objets peuvent contenir plusieurs paires clé / valeur (clé / valeur) .

La clé doit être une chaîne et la valeur peut être un type de données JSON valide (chaîne, nombre, objet, tableau, booléen ou nul).

Utilisez deux points (:) pour séparer la clé et la valeur.

Chaque paire clé / valeur est séparée par une virgule (,).

Tableau JSON

Array en tant qu'objet JSON

Exemple

["Google", "Runoob", "Taobao"]

Le tableau JSON est écrit entre crochets.

La valeur du tableau dans JSON doit être un type de données JSON valide (chaîne, nombre, objet, tableau, booléen ou nul).

En JavaScript, les valeurs de tableau peuvent être les types de données JSON ci-dessus ou des expressions JavaScript, y compris des fonctions, des dates et non définies .

Tableau dans un objet JSON

La valeur d'une propriété d'objet peut être un tableau:

Exemple

{ "name":"网站", "num":3, "sites":[ "Google", "Runoob", "Taobao" ] }

Il existe trois formats de données pour les objets json

Ils sont les suivants:

Types de	grammaire	Explication
Type d'objet	{nom: valeur, nom: valeur ...}	Où nom est un type de chaîne et valeur est n'importe quel type
Type de tableau / collection	[valeur, valeur, valeur ...] 或 [{}, {} ...]	Où valeur est n'importe quel type (tel qu'un objet js ou un tableau)
Type mixte	{Nom:[]... ...}	Enveloppez correctement les types d'objets imbriqués et les types de tableaux

format de données json: principalement composé d'objet {} et de tableau []:

Les objets incluent des paires clé-valeur (attribut: valeur d'attribut) {clé: valeur}, et la valeur peut être str, num, list, obj. Utilisez objcet.key pour la valeur

{clé: valeur, clé2: valeur2,} clé: les valeurs sont séparées par des deux-points, utilisées entre les paires et connectées

Le tableau contient des éléments: num, str, list, objcet sont tous disponibles, utilisez index pour accéder à [index] et utilisez. Pour connecter chaque valeur:

var stu = {"student":           //stu 对象包含student的key,值为一个数组
[                                     //数组的每一个值为一个具体的学生对象
{"name": "Tom","Grade":1, "age":11, "gender": "M"},     //学生对象的键为名字,值为对应属性
{"name": "Jerry", "Grade":1, "age":10, "gender": "M"}       //每个属性对应的是一个key,value对
],
"classroom": {"class1": "room1", "class2": "room2"}         //对象的值,嵌套对象
};

Lire les données:

document.write(stu.student[1].name);     // 输出第二个学生名
document.write(stu.student[0].age);      // 输出第一个学生年龄
document.write(stu.classroom.class1);    // 输出 classroom 的 class1 值
document.write(stu["classroom"].class2); // 也可用中括号键访问对象值

AJAX

AJAX signifie "Asynchronous JavaScript And XML" (JavaScript et XML asynchrones). Il fait référence à une technologie de développement Web permettant de créer des applications Web interactives. En échangeant une petite quantité de données avec le serveur en arrière-plan, Ajax peut permettre aux pages Web d'être mis à jour de manière asynchrone. Cela signifie que certaines parties de la page Web peuvent être mises à jour sans recharger la page Web entière. Les pages Web traditionnelles (n'utilisant pas Ajax) doivent recharger la page Web entière si le contenu doit être mis à jour.

AJAX est un navigateur qui lance une requête de manière asynchrone via js. Technologie pour mettre à jour partiellement la page.

AJAX = JavaScript et XML asynchrones (JavaScript et XML asynchrones).

AJAX n'est pas un nouveau langage de programmation, mais une nouvelle façon d'utiliser les normes existantes.

Le plus grand avantage d'AJAX est qu'il peut échanger des données avec le serveur et mettre à jour une partie du contenu de la page Web sans recharger la page entière.

AJAX ne nécessite aucun plug-in de navigateur, mais oblige les utilisateurs à autoriser JavaScript à s'exécuter sur le navigateur.

Synchronisation: le client doit attendre que le serveur réponde. Aucune autre opération ne peut être effectuée pendant la période d'attente

Asynchrone: aucune réponse côté serveur n'est requise

Ajax peut mettre à jour une partie de la page Web sans charger la page Web

AJAX引擎会在不刷新浏览器地址栏的情况下，发送异步请求

1.1 使用JavaScript获得浏览器内置的AJAX引擎（XMLHttpRequest对象）

1.2 使用js确定请求路径和请求参数

1.3  AJAX引擎对象根据请求路径和请求参数进行发送请求

服务器接收到ajax引擎的请求进行处理

2.1     服务器获得请求参数数据

2.2     服务器处理请求业务（调用业务层代码）

2.3     服务器响应数据给ajax引擎

AJAX引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面具体位置。

3.1     通过设置给AJAX引擎的回调函数获得服务器响应的数据

3.2     使用JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的。

Méthode de requête AJAX

Nom d'attribut	Explication
URL	L'adresse URL côté serveur demandée
asynchrone	(Par défaut: true) Par défaut, toutes les demandes sont des demandes asynchrones. Si vous devez envoyer une demande de synchronisation, veuillez définir cette option sur false
Les données	Les données envoyées au serveur peuvent être sous forme de paires clé-valeur ou sous forme d'objets js
taper	(Par défaut: "GET") Méthode de requête ("POST" ou "GET"), la valeur par défaut est "GET"
Type de données	Le type de données de retour attendu, la valeur peut être xml, html, script, json, text, _defaul, etc.
Succès	Fonction de rappel après une demande réussie
Erreur	Appelez cette fonction lorsque la demande échoue

Requête AJAX dans jQuery

$ .ajax ({clé: valeur, clé: valeur})

Méthode $ .ajax

url représente l'adresse de la demande
type indique le type de requête GET / POST
data représente les données envoyées au serveur
nom = valeur & nom = valeur
{valeur clé}
réponse de demande de succès, fonction de rappel de réponse
type de données de réponse dataType

$ .get ()

URL
Les données
rappeler
taper

$ .post ()

URL
Les données
rappeler
taper

Comment fonctionne AJAX

AJAX est basé sur les standards Internet existants

AJAX est basé sur les standards Internet existants et les utilise conjointement:

Objet XMLHttpRequest (échange de données asynchrone avec le serveur)
JavaScript / DOM (affichage / interaction des informations)
CSS (définir des styles pour les données)
XML (comme format des données converties)

Analyse d'instance AJAX

        $.ajax({
              url:'/api/v1/questions/hits',
              type:'get',
              dataType:'json',
              success:function (json) {
                  questionApp.questions = json.data;
              }
           });

Vue.component('v-select', VueSelect.VueSelect);
let createQuestionApp = new Vue({
    el: '#createQuestionApp',
    data: {
        title: null,
        tags: [],
        selectedTagIds: [],
        teachers: [],
        selectedTeacherIds: []
    },
    methods: {
        loadTags: function () {
            $.ajax({
                url: '/api/v1/tags',
                type: 'get',
                success: function (json) {
                    let tags = [];
                    for (let i = 0; i < json.data.length; i++) {
                        let op = {
                            label: json.data[i].name,
                            value: json.data[i].id
                        };
                        tags[i] = op;
                    }
                    createQuestionApp.tags = tags;
                }
            });
        },
        loadTeachers: function () {
            $.ajax({
                url: '/api/v1/users/teacher/list',
                type: 'get',
                success: function (json) {
                    let teachers = [];
                    for (let i = 0; i < json.data.length; i++) {
                        let teacher = {
                            label: json.data[i].nickname,
                            value: json.data[i].id
                        }
                        teachers[i] = teacher;
                    }
                    createQuestionApp.teachers = teachers;
                }
            });
        },
        createQuestion: function () {
            let content = $('#summernote').val();
            console.log("标题：" + this.title);
            console.log("选中的标签：" + this.selectedTagIds);
            console.log("选中的老师：" + this.selectedTeacherIds);
            console.log("正文：" + content);

            $.ajax({
                url:'/api/v1/questions/create',
                type:'post',
                traditional:true,
                data:{
                    title:createQuestionApp.title,
                    tagIds:createQuestionApp.selectedTagIds,
                    teacherIds:createQuestionApp.selectedTeacherIds,
                    content:content
                },

                success:function (json) {
                    if (json.state==2000){
                        alert("发表问题成功!!!")
                    }else{
                        alert(json.message);
                    }
                }
            });
        }
    },
    created: function () {
        this.loadTags();
        this.loadTeachers();
    }
});

Station d'approvisionnement de recrue Java --- AJAX et JSON

JSON

JSON (Notation d'objets JavaScript, Notation d'objets JS)

Identique à XML

Différence avec XML

Pourquoi utiliser JSON?

Pourquoi JSON est-il meilleur que XML?

Syntaxe JSON

Règles de syntaxe JSON

Paires nom / valeur JSON

Valeur JSON

Numéro JSON

Objet JSON

Tableau JSON

JSON booléen

JSON nul

JSON utilise la syntaxe JavaScript

Exemple

Objet JSON

Syntaxe des objets

Exemple

Tableau JSON

Array en tant qu'objet JSON

Tableau dans un objet JSON

Il existe trois formats de données pour les objets json

AJAX

Méthode de requête AJAX

Requête AJAX dans jQuery

Méthode $ .ajax

$ .get ()

$ .post ()

Comment fonctionne AJAX

AJAX est basé sur les standards Internet existants

Analyse d'instance AJAX

Je suppose que tu aimes