Exemple de code pour utiliser des objets json en HTML5-Tutoriel H5-php.cn

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!