我的json获取数据实例，直接运行就可以看到了

最新推荐文章于 2024-09-19 15:09:56 发布

原创最新推荐文章于 2024-09-19 15:09:56 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数组 #json实例 #ajax传值

本文介绍了一个使用JavaScript解析JSON数据的具体实例。通过简单的HTML页面展示如何遍历并显示JSON对象中的数组信息，包括程序员、作家和音乐家等不同类型的人员数据。

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

开始一直用jq的ajax接收值也是字符但是没用过json数据。（所以一直都用切割的方法来做）听朋友们说JSon处理数据比较好，所以也加入了json这个行列了。快来看看吧。对AJAX比较接收处理数据比较好!力荐！...

转自：http://www.ok22.org/art_detail.aspx?id=136（可直接运行）

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的json获取数据实例，直接运行就可以看到了</title>
<meta name="Keywords" content="直接运行就可以看到了" />
<meta name="Description" content="是一个免费提供代码分享的一个网站,有最全的SEO资料,及Div+css,javascript,SEO学习网页前端设计" />
<head>
<script>
var people = {
"programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
　　{"firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },
　　{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }
　　],
　　"authors": [
　　{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
　　{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
　　{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
　　],
　　"musicians": [
　　{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
　　{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
　　]
}
var lxr = {"AREA":[{"df":"请选择国籍","lg":"中国" },{"dsf":"江西","dperson":"九江"},{"dsf":"广东","dperson":"汕头"}]};
//alert(lxr.AREA[0].df+"--"+lxr.AREA[0].lg);
//for(i=1;i<lxr.AREA.length;i++)
//alert(lxr.AREA[i].dsf+"--"+lxr.AREA[i].dperson);
//alert(people.authors[1].genre);
//alert(people.length);
var str="";
var str2="";
</script>
</head>
<body>
<div id="info"></div>
<div id="area"></div>
</body>
</html>
<script>
for(j=0;j<people.programmers.length;j++)
{
str+="programmers第"+j+1+"个"+people.programmers[j].firstName+"--"+people.programmers[j].lastName+"--"+people.programmers[j].email+"<br>"
}
for(j=0;j<people.authors.length;j++)
{
str+="authors第"+j+1+"个"+people.authors[j].firstName+"---"+people.authors[j].lastName+"---"+people.authors[j].genre+"<br>"
}
for(j=0;j<people.musicians.length;j++)
{
str+="musicians第"+j+1+"个"+people.musicians[j].firstName+"---"+people.musicians[j].lastName+"---"+people.musicians[j].instrument+"<br>"
}
//alert(str);
str2+=lxr.AREA[0].df+"--"+lxr.AREA[0].lg+"<br>";
for(i=1;i<lxr.AREA.length;i++)
str2+=lxr.AREA[i].dsf+"--"+lxr.AREA[i].dperson+"<br>";
document.getElementById("info").innerHTML=str;
document.getElementById("area").innerHTML=str2;
//alert(lxr.AREA[i].dsf+"--"+lxr.AREA[i].dperson);
//alert(people.authors[1].genre);
//alert(people.length);
</script>