Maison > interface Web > Tutoriel H5 > le corps du texte

Exemple de code pour utiliser des objets json en HTML5

青灯夜游
Libérer: 2018-10-09 15:23:41
avant
2407 Les gens l'ont consulté

Cet article présente principalement l'exemple de code pour utiliser les objets json en HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Ce qui suit est un exemple de code pour vous présenter comment utiliser les objets json en HTML5. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
    <head>
     <meta charset="UTF-8">
     <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
     <title>json对象用法</title>
     <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css" />
     <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.6.0/aliplayer-min.js"></script>
    </head>
    <body>
        <p  class="prism-player" id="J_prismPlayer" style="position: absolute"></p>
        <script>
        var students = {
          xiaomin: {
            name: "xiaoming",
            grade: 1
          },
          teemo: {
            name: "teemo",
            grade: 3
          }
        }
        students = JSON.stringify(students); //将JSON转为字符串存到变量里
        console.log(students);
        localStorage.setItem("students",students);//将变量存到localStorage里
        var newStudents = localStorage.getItem("students");
        newStudents = JSON.parse(students); //转为JSON
        console.log(newStudents); // 打印出原先对象
    //  alert(newStudents.length);
        alert(newStudents.xiaomin.name);
         //json数组类型字符串取值
        var jsonStr = &#39;[{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"011","open":false,"pId":"01","name":"A部门"},{"id":"03","open":false,"pId":"0","name":"A部门"},{"id":"04","open":false,"pId":"0","name":"A部门"}, {"id":"05","open":false,"pId":"0","name":"A部门"}, {"id":"06","open":false,"pId":"0","name":"A部门"}]&#39;;
        var jsonObj =  JSON.parse(jsonStr);//转换为json对象
        for(var i=0;i<jsonObj.length;i++){
                alert(jsonObj[i].id);  //取json中的值
        }
        console.log(jsonObj)
        var jsonStr1 = JSON.stringify(jsonObj)
        console.log(jsonStr1+"jsonStr1")
        </script>
    </body>
</html>
Copier après la connexion

Supplément : prenez un. regardez ci-dessous Conversion entre objets JSON et String en Html5

Face au développement rapide des terminaux mobiles, la manière de fournir des données n'est pas plus l'interface PC précédente--> ;, qui favorise l'utilisation du format JSON avant H5, j'ai mentionné la méthode eval, eval() dans le traitement JS précédent de JSON en H4, et la conversion de JSON et String. en H5 comme suit :

La chaîne est convertie en objet JSON :                                                Résumé

var jsonObj;
function myParse(){
     var jsonStr=document.querySelector("#txtJsonStr").value;
     jsonObj=JSON.parse(jsonStr);
}
Copier après la connexion

Ce qui précède est l'exemple de code qui vous présente l'utilisation des objets JSON en HTML5. Je j'espère que cela sera utile à votre apprentissage. Pour plus de didacticiels connexes, veuillez visiter le
function myStringify(){
     var txtJson=document.querySelector("#txtJsonStr");
     var jsonStr2=JSON.stringify(jsonObj); //此处的jsonObj 是一个 JSON对象
     xtJson.value=jsonStr2;
}
Copier après la connexion
Tutoriel vidéo HTML5

 ! Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique HTML5

Manuel HTML5 en ligne

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!

Étiquettes associées:
source:jb51.net
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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!