josn解析+案列

最新推荐文章于 2023-03-06 11:53:04 发布

原创最新推荐文章于 2023-03-06 11:53:04 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

JAVA web篇专栏收录该内容

3 篇文章

订阅专栏

这篇博客演示了如何通过JavaScript实现从模拟JSON数据中获取信息，并将这些信息动态加载到HTML表格中。通过点击按钮触发函数`run()`，实现了从JSON字符串转化为JavaScript对象，然后遍历对象并将数据逐行添加到表格中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03json案例.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



</head>
<script type="text/javascript">
/*
点击“点我加载数据”
将JSON中的数据加载到表格中。

1、json数据获取
2、解析json数据
eval
3、添加进表格中
3.1、遍历添加
把一个对象作为表格一行进行添加
*/
function run(){
//1、模拟从服务器获取数据
var goods ="[{'name':'电视机','price':'200','number':'10'},{'name':'手机','price':'4200','number':'100'},{'name':'电冰箱','price':'2000','number':'8'}]";
// 2、解析json数据
var jsg = eval("("+goods+")");

// 3、添加进表格中
var table=document.getElementById("t1");
// 3.1、遍历添加
for(var i=0;i<jsg.length;i++){
//把一个对象作为表格一行进行添加
table.innerHTML+="<tr><td>"+jsg[i]["name"]+"</td><td>"+jsg[i]["price"]+"</td><td>"+jsg[i]["number"]+"</td></tr>";
}
}

</script>
<body>
<table border="1" width="100%" id="t1">
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>库存</th>
</tr>
</table><br/>
<input type="button" value="点我加载数据" onclick="run()"/>
</body>
</html>