Maison > Article > interface Web > Exemple de code pour utiliser des objets json en HTML5

Exemple de code pour utiliser des objets json en HTML5

青灯夜游avant: 2018-10-09 15:23:422441parcourir

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>

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);
}

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;
}

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!

php json html5 String JS 对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Découpe d'écran vert vidéo d'opération de point de pixel de toileArticle suivant：Découpe d'écran vert vidéo d'opération de point de pixel de toile

Articles Liés

Voir plus