JavaScript 操作JSON

最新推荐文章于 2019-02-20 14:08:37 发布

冰灵

最新推荐文章于 2019-02-20 14:08:37 发布

阅读量636

点赞数

分类专栏： JS 文章标签： JavaScript JSON

本文链接：https://blog.csdn.net/bud_icelf/article/details/8953040

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

个人原创,欢迎转载,转载请注明出处http://blog.csdn.net/bud_icelf QQ:909648986

JavaScript 操作JSON

什么是JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。

实例1 JavaScript 读取内部 JSON

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<div>
		<table id="bookTable" border="2">
			<tr>
				<th>书名</th>
				<th>作者</th>
				<th>价格</th>
			</tr>
		</table>
	</div>
	<script>
		var booksObj={
			books:[
			{"title":"三国演义","author":"罗贯中","price":"48.00"},
			{"title":"西游记","author":"吴承恩","price":"37.00"},
			{"title":"水浒传","author":"施耐庵","price":"40.00"},
			{"title":"红楼梦","author":"曹雪芹","price":"35.00"}
			]
		}
		var bookTable=document.getElementById("bookTable");
		for(i=0;i<booksObj.books.length;i++){
			var tr=document.createElement("tr");  
            var titleTd=document.createElement("td");  
            var authorTd=document.createElement("td");  
            var priceTd=document.createElement("td");  
              
            var title=booksObj.books[i].title;  
            var author=booksObj.books[i].author;  
            var price=booksObj.books[i].price;  
              
            var titleTextNode=document.createTextNode(title);  
            var authorTextNode=document.createTextNode(author);  
            var priceTextNode=document.createTextNode(price);  
              
            titleTd.appendChild(titleTextNode);  
            authorTd.appendChild(authorTextNode);  
            priceTd.appendChild(priceTextNode);  
              
            tr.appendChild(titleTd);  
            tr.appendChild(authorTd);  
            tr.appendChild(priceTd);  
              
            bookTable.appendChild(tr);  
        }
	</script>
</body>
</html>

效果显示

var booksObj={
books:[
{"title":"三国演义","author":"罗贯中","price":"48.00"},
{"title":"西游记","author":"吴承恩","price":"37.00"},
{"title":"水浒传","author":"施耐庵","price":"40.00"},
{"title":"红楼梦","author":"曹雪芹","price":"35.00"}
]
}

创建JSON对象booksObj,booksObj包含一个对象数组books,books包含四个书籍记录(对象).

var tr=document.createElement("tr");

创建节点<tr>元素.

var title=booksObj.books[i].title;

获取JSON对象booksObj的对象数组books第i项的title所对应的值.

var titleTextNode=document.createTextNode(title);

创建文本节点.

titleTd.appendChild(titleTextNode);

向<td>加入文本节点.

tr.appendChild(titleTd);

向<tr>元素追加新元素<td>.

实例2 JavaScript 读取外部 JSON

编写JSON文件,命名为test.json

{
	books:[
	{"title":"三国演义","author":"罗贯中","price":"48.00"},
	{"title":"西游记","author":"吴承恩","price":"37.00"},
	{"title":"水浒传","author":"施耐庵","price":"40.00"},
	{"title":"红楼梦","author":"曹雪芹","price":"35.00"}
	]
}

编写HTML文件

<!DOCTYPE>
<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<div>
		<table id="bookTable" border="2">
			<tr>
				<th>书名</th>
				<th>作者</th>
				<th>价格</th>
			</tr>
		</table>
	</div>
	<script>
		var jsonResp;
		var booksObj;
		var xmlHttp=new XMLHttpRequest();
		xmlHttp.open("GET","test.json",false);
		xmlHttp.send();
		jsonResp=xmlHttp.responseText;
		booksObj=eval("("+jsonResp+")");
		
		var bookTable=document.getElementById("bookTable");
		for(i=0;i<booksObj.books.length;i++){
			var tr=document.createElement("tr");  
            var titleTd=document.createElement("td");  
            var authorTd=document.createElement("td");  
            var priceTd=document.createElement("td");  
              
            var title=booksObj.books[i].title;  
            var author=booksObj.books[i].author;  
            var price=booksObj.books[i].price;  
              
            var titleTextNode=document.createTextNode(title);  
            var authorTextNode=document.createTextNode(author);  
            var priceTextNode=document.createTextNode(price);  
              
            titleTd.appendChild(titleTextNode);  
            authorTd.appendChild(authorTextNode);  
            priceTd.appendChild(priceTextNode);  
              
            tr.appendChild(titleTd);  
            tr.appendChild(authorTd);  
            tr.appendChild(priceTd);  
              
            bookTable.appendChild(tr);  
        }
	</script>
</body>
</html>

效果显示

xmlHttp=new XMLHttpRequest();

创建XMLHttpRequest对象.

xmlHttp.open("GET","test.json",false);

发送Http请求,参数一指定以"GET"方式发送请求,参数二为指定的文件，参数三为是否异步加载.

jsonResp=xmlHttp.responseText;

获取JSON文本内容.

booksObj=eval("("+jsonResp+")");

解析JSON 文本,生成JSON对象.

冰灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 操作JSON

个人原创,欢迎转载,转载请注明出处http://blog.csdn.net/bud_icelf QQ:909648986JavaScript 操作JSON什么是JSONJSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition -
复制链接

扫一扫

专栏目录