jquery解析json

最新推荐文章于 2024-03-30 17:30:34 发布
最新推荐文章于 2024-03-30 17:30:34 发布
阅读量84 收藏
点赞数
分类专栏： JQuery 文章标签： json jQuery HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/scheme2008/article/details/83667158
版权 
var data=" 
{ 
root: 
[ 
{name:'1',value:'0'}, 
{name:'6101',value:'西安市'}, 
{name:'6102',value:'铜川市'}, 
{name:'6103',value:'宝鸡市'}, 
{name:'6104',value:'咸阳市'}, 
{name:'6105',value:'渭南市'}, 
{name:'6106',value:'延安市'}, 
{name:'6107',value:'汉中市'}, 
{name:'6108',value:'榆林市'}, 
{name:'6109',value:'安康市'}, 
{name:'6110',value:'商洛市'} 
] 
}";


对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明： 

var dataObj=eval("("+data+")");//转换为json对象 
alert(dataObj.root.length);//输出root的子对象数量 
$.each(dataObj.root,fucntion(idx,item){ 
if(idx==0){ 
return true; 
} 

//输出每个root子对象的名称和值 
alert("name:"+item.name+",value:"+item.value); 
})


注：对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。

JSON文件: 
[ 
{ 
"name":"xujun", 
"sex":"男", 
"home":"nanjing" 
}, 
{ 
"name":"jack", 
"sex":"男", 
"home":"beijing" 
} 
]


Html文件： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script src="../jquery.js"></script> 
<script> 
$(document).ready(function(){ 
$.getJSON('jsonData.json?id',function(data){ 
//遍历JSON中的每个entry 

$.each(data,function(entryIndex,entry){ 
var html='<tr>'; 
html+='<td>'+entry['name']+'</td>'; 
html+='<td>'+entry['sex']+'</td>'; 
html+='<td>'+entry['home']+'</td>'; 
html+='</tr>'; 
$('#title').after(html); 

}); 
}); 
}); 
</script> 
</head> 
<body> 
<table> 
<tr id="title"> 
<th>姓名</th> 
<th>性别</th> 
<th>家庭地址</th> 
</tr> 
</table> 
</body> 
</html>
shmily2oo8
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
json-schema-component:基于JSON模式的基于jQuery的编辑器组件呈现表单
05-08
JSON模式组件 该JavaScript库将 根据给定的生成表单， 用（隐藏的）文本区域中包含的JSON数据结构填充表单， 将对表单的更改同步到数据结构，以及 如果数据结构无法根据架构进行验证，则以表格形式显示验证错误。 这些功能的组合允许快速开发JSON API的即时用户界面，例如在基于CouchDB的后台Office GUI中。 您可以在观看演示。 用法 这是一个简单的示例，显示了如何将此库嵌入到Web应用程序中： <!-- .. --> [removed] [removed] <scr
Jquery解析json数据详解
01-19
最近被jquery折磨了一番，倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集，将dataSet转换成json并返回给客户端，客户端用jquery getJson方法解析出来并显示在页面上。...
json schema
&&
03-01 645
allOf 、anyOf 、oneOf理解 表示对某一个属性生效 （allOf 、anyOf 、oneOf）里面的规则，不是全部属性对这些规则生效 allOf anyOf oneOf
json删除指定元素_json之JsonSchema教程
weixin_39609071的博客
12-03 297
json之JsonSchema教程简介JSON Schema是基于JSON格式，用于定义JSON数据结构以及校验JSON数据内容。 JSON Schema官网地址：http://json-schema.org/ 个人观点：JsonSchema类似于xml的schema和DTD的作用，主要是用来规范json的格式。关键字及其描述关键字描述$schema表示该JSON Schema文件遵循的规范tit...
JSON Schema及其用法
最新发布
读万卷书 行万里路
03-30 1772
本篇主要介绍JSON Schema的基本语法，必要时会使用python代码来验证。JSON Schema是一种用于描述的规范，可以用来定义JSON数据对象的结构、格式和约束条件。通过JSON Schema，可以对JSON数据进行验证、校验和文档化，确保数据的正确性和完整性。
JSON schema（模式）
梁辰兴的博客
11-13 7008
JSON Schema 译为“JSON模式”，它是由 IETF 编写和起草的。那么 JSON Schema 有什么作用呢？IETF 是 The Internet Engineering Task Force 的简称，译为“国际互联网工程任务组”，是一个公开性质的大型民间国际团体。{"id" : 1 , "name" : "JSON教程" , "author" : "C语言中文网" , "price" : 99.9 }
jQuery解析json格式数据示例
10-18
本篇文章将详细探讨如何使用jQuery解析和操作JSON格式的数据。 首先，JSON是一种数据交换格式，它基于JavaScript的一个子集。数据格式清晰，易于人阅读和编写，同时也易于机器解析和生成。JSON格式通常由键值对组成...
jQuery解析json格式数据简单实例
10-22
需要注意的是，`JSON.parse()`方法在JavaScript中用于解析JSON字符串，而在早期的jQuery版本中，如果需要解析JSON，可能需要使用额外的库，如`json2.js`。然而，从jQuery 1.4版本开始，jQuery提供了`.getJSON()`方法...
jQuery解析json数据实例分析
10-23
主要介绍了jQuery解析json数据的具体实现方法,结合实例形式较为详细的分析了jQuery解析json格式数据的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery解析Json实例详解
10-23
主要介绍了jQuery解析Json的方法,结合实例形式较为详细的分析了jQuery针对json的常用解析与转换技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JSON-Schema定义规范
01-25
熟悉XML的开发人员都知道，对XML文档的定义有一个XML Schema。同样，对于JSON文件的定义，也应该有一个JSON Schema以规范JSON文件内容。IETF负责起草相关规范最新版本是2018年3月19日发布的Draft 7。JSON Schema用以标注和验证JSON文档的元数据的文档，可以类比于XML Schema。相对于JSON Schema，一个JSON文档就是JSON Schema的一个instance。JSON Schema的特点： • 描述现有数据格式。 • 干净的人类和机器可读的文档。 • 完整的结构验证，有利于自动化测试。 • 完整的结构验证，可用于验证客户端提交的数据。
JSON Schema 简介
戴泽王的博客
10-31 2507
JSON Schema 简介
Json schema 详解
qq_41082118的博客
01-06 1万+
简介 要真正理解 JSON Schema，首先需要知道什么是 JSON。 JSON 代表 “JavaScript对象表示法”，是一种简单的数据交换格式。它最初是万维网的一个符号。因为JavaScript存在于大多数Web浏览器中，而JSON是基于JavaScript的，所以Jav...
Json Schema简介和Json Schema的高性能.net实现库 LateApexEarlySpeed.Json.Schema
weixin_46889511的博客
12-26 1640
项目原始文档：https://github.com/lateapexearlyspeed/Lateapexearlyspeed.JsonSchema.Doc中文文档：LateApexEarlySpeed.Json.Schema是2023年12月发布的一个新的.net下的Json Schema实现库，基于截止到2023年12月为止最新版的Json Schema验证功能经过了for draft 2020.12的测试。（部分排除的用例见下面的已知限制章节）
JSON Schema入门和应用
yeyeye0525的博客
03-04 3571
本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 JSON Schema入门和应用 何为JSON Schema？ JSON数据格式对于web开发者都为所熟悉，在平时的开发中离不开它，例如前后端数据传输格式，webpack配置文件，对象序列化等实际应用场景，通常都以JSON格式定义和储存。它以简洁易懂的结构、体积小的优点得以在各类编程语言中广泛流行。 那么什么是JSON Schema? JSON Schema其实是对json数据格式的描述和规范，是对.
2023我还不知道的JSON Schema-基础篇
冷星的专栏
03-13 513
JSON 在前端日常开发中再熟悉不过，往往我们和后端的数据交互都是通过 JSON 来进行传输的。那么具体什么是 JSON 呢？什么是JSON Schema呢？
JSON Schema 详解
热门推荐
Bossen的学习历程
04-12 3万+
简介 要真正理解 JSON Schema，首先需要知道什么是 JSON。 JSON 代表 “JavaScript对象表示法”，是一种简单的数据交换格式。它最初是万维网的一个符号。因为JavaScript存在于大多数Web浏览器中，而JSON是基于JavaScript的，所以JavaScript自然是支持JSON的。现在，JSON已经被证明是非常简单和有用的，因此已经被用于许多不涉及Web的环境中。...
JSON 模式（Schema）与数据解析
weixin_34080571的博客
05-17 1846
JSON 模式（Schema） JSON 模式是一种基于 JSON 格式定义 JSON 数据结构的规范 JSON 模式用于描述现有数据格式，干净的人类和机器可读的文档，完整的结构验证，有利于自动化测试，可用于验证客户端提交的数据 JSON 模式验证库 目前有好几个验证器可用于不同的编程语言。但是目前最完整和兼容 JSON 模式的验证器是 JSV JSON...
Json-schema 快速入门
03-07 943
文章目录介绍从Schema开始定义属性深入了解属性嵌套数据结构架构外的引用查看我们定义的 JSON Schema 的数据 介绍 以下示例决不包含 JSON Schema 可以提供的所有值。为此，您需要深入了解规范本身——在https://json-schema.org/specification.html了解更多信息。 假设我们正在与基于 JSON 的产品目录进行交互。该目录的产品具有： 标识符：productId 商品名称：productName 消费者的销售成本：price 一组可选标签：tags.
Json-schema简介和应用
xxxcyzyy的博客
07-03 3641
https://www.imooc.com/article/67826 https://blog.csdn.net/zjg379569986/article/details/84634803(【JAVA】使用JSON Schema校验JSON数据是否合规) Json？ 了解json schema首先要知道什么是json？ json 是JavaScript Object Notatio...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值