HTML5 Json解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: HTML5已原生支持json的解析,window.JSON.parse()将json格式字符串转换为json对象,window.JSON.stringify()将json对象转换为json格式字符串。   示例: Html代码  <!DOCTYPE HTML>   <html>   <head> 

HTML5已原生支持json的解析,window.JSON.parse()将json格式字符串转换为json对象,window.JSON.stringify()将json对象转换为json格式字符串。

 

示例:

Html代码 

  1. <!DOCTYPE HTML>  

  2. <html>  

  3. <head>  

  4.     <title>Window.JSON</title>  

  5.     <meta charset="gb18030">  

  6. </head>  

  7.   

  8. <body>  

  9.     <button type="button" id="btn1">解析json字符串</button>  

  10.     <button type="button" id="btn2">json对象转换为json字符串</button>  

  11.     <div id="res">  

  12.       

  13.     </div>  

  14.     <script language="JavaScript">  

  15.     <!--  

  16.         var jsonStr = "{\"total\":100,\"data\":[{\"id\":10001,\"name\":\"scott\"},{\"id\":10002,\"name\":\"tiger\"}]}";  

  17.         var jsonObj = window.JSON.parse(jsonStr);  

  18.           

  19.         document.getElementById("btn1").onclick = function() {  

  20.             var str = "json字符串解析为json对象<br>";  

  21.             str += "<span>Total:"+jsonObj.total+"</span><br><span>Data:";  

  22.             for (var i=0;i<jsonObj.data.length ; i++)  

  23.             {  

  24.                 str += "id:" + jsonObj.data[i].id + ",name:" + jsonObj.data[i].name+"<br>";  

  25.             }  

  26.             str += "</span><br>";  

  27.             document.querySelector("#res").innerHTML = str;  

  28.   

  29.         }  

  30.         document.getElementById("btn2").onclick = function() {  

  31.             var jsonObj = {total:100,data:[{id:10001,name:"scott"},{id:10002,name:"tiger"}]};  

  32.             var jsonStr = window.JSON.stringify(jsonObj);  

  33.             var str = "转为json字符串:<br>" + jsonStr;  

  34.             document.querySelector("#res").innerHTML = str;  

  35.         }  

  36.     //-->  

  37.     </script>  

  38. </body>  

  39. </html>  

 单击“解析json字符串”按钮,结果:

json字符串解析为json对象
Total:100
Data:id:10001,name:scott
id:10002,name:tiger

 

单击“json对象转换为json字符串”按钮,结果:

转为json字符串:
{"total":100,"data":[{"id":10001,"name":"scott"},{"id":10002,"name":"tiger"}]}

目录
相关文章
|
2月前
|
SQL 存储 JSON
SQL,解析 json
SQL,解析 json
74 8
|
12天前
|
XML 数据采集 数据格式
Python 爬虫必备杀器,xpath 解析 HTML
【11月更文挑战第17天】XPath 是一种用于在 XML 和 HTML 文档中定位节点的语言,通过路径表达式选取节点或节点集。它不仅适用于 XML,也广泛应用于 HTML 解析。基本语法包括标签名、属性、层级关系等的选择,如 `//p` 选择所有段落标签,`//a[@href=&#39;example.com&#39;]` 选择特定链接。在 Python 中,常用 lxml 库结合 XPath 进行网页数据抓取,支持高效解析与复杂信息提取。高级技巧涵盖轴的使用和函数应用,如 `contains()` 用于模糊匹配。
|
1月前
|
XML JavaScript 前端开发
如何解析一个 HTML 文本
【10月更文挑战第23天】在实际应用中,根据具体的需求和场景,我们可以灵活选择解析方法,并结合其他相关技术来实现高效、准确的 HTML 解析。随着网页技术的不断发展,解析 HTML 文本的方法也在不断更新和完善,
|
1月前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
112 1
|
2月前
|
XML 数据格式
HTML 实例解析
本文介绍了HTML中常见元素的使用方法,包括`&lt;p&gt;`、`&lt;body&gt;`和`&lt;html&gt;`等。详细解析了这些元素的结构和作用,并强调了正确使用结束标签的重要性。此外,还提到了空元素的使用及大小写标签的规范。
|
2月前
|
XML 前端开发 数据格式
Beautiful Soup 解析html | python小知识
在数据驱动的时代,网页数据是非常宝贵的资源。很多时候我们需要从网页上提取数据,进行分析和处理。Beautiful Soup 是一个非常流行的 Python 库,可以帮助我们轻松地解析和提取网页中的数据。本文将详细介绍 Beautiful Soup 的基础知识和常用操作,帮助初学者快速入门和精通这一强大的工具。【10月更文挑战第11天】
65 2
|
2月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
104 2
|
2月前
|
前端开发 JavaScript
pyquery:一个灵活方便的 HTML 解析库
pyquery:一个灵活方便的 HTML 解析库
27 1
|
3月前
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml
|
2月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
36 0

推荐镜像

更多