Heim > Web-Frontend > H5-Tutorial > Beispielcode für die Verwendung von JSON-Objekten in HTML5

Beispielcode für die Verwendung von JSON-Objekten in HTML5

青灯夜游
Freigeben: 2018-10-09 15:23:41
nach vorne
2460 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den Beispielcode für die Verwendung von JSON-Objekten in HTML5 vor. Freunde in Not können darauf verweisen.

Im Folgenden finden Sie einen Beispielcode, der Ihnen die Verwendung von JSON-Objekten in HTML5 vorstellt. Der spezifische Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Zusätzlich: Schauen Sie sich unten um Konvertierung zwischen JSON-Objekten und String in HTML5

Angesichts der rasanten Entwicklung mobiler Endgeräte ist die Art der Datenbereitstellung nicht mehr die richtige Vorherige PC-->PC-Schnittstelle, die die Verwendung des JSON-Formats in JS vor H5 veranlasste, ich erwähnte die eval-Methode, eval() in der vorherigen JS-Verarbeitung von JSON in H4 wie folgt:

String zum JSON-Objekt:                                                                                                                                                                                                    🎜>

Das Obige ist der Beispielcode, der Ihnen die Verwendung von JSON-Objekten in HTML5 vorstellt. Ich hoffe, dass er Ihnen beim Lernen hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter

Html5-Video-Tutorial

! Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

HTML5-Grafik-Tutorial

HTML5 Online-Handbuch

Das obige ist der detaillierte Inhalt vonBeispielcode für die Verwendung von JSON-Objekten in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:jb51.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage