版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_37625860/article/details/73863833
一:json是什么?
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
二:前端接受后台传过来的json数据
代码示例:
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'goodsList.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
window.onload=function(){
var all = document.getElementById('all');
all.onclick=function(){
<!-- 调用ajax请求,访问成功接受json数据 -->
$.post("selectAll_good",function(Result){
var name = document.getElementById('name'),
main = document.getElementById('main'),
goodTitle = document.getElementById('goodTitle'),
goodMessage = document.getElementById('goodMessage'),
goodPicture = document.getElementById('goodPicture'),
goodPrice = document.getElementById('goodPrice'),
goodId = document.getElementById('goodId'),
<!-- 得到json数据,讲json对象转换为json字符串 -->
dates = JSON.parse(Result),
<!-- 得到json对象中第一个array对象 -->
date = dates[0],
<!-- 得到array中名为glist的集合 -->
goods = date.glist;
main.style.display="block";
<!-- 遍历该集合 -->
for(var i=0;i<goods.length;i++ ){
<!-- 以对象.属性的方法获取数据 -->
name.innerHTML=goods[0].goodName;
goodTitle.innerHTML=goods[0].goodTitle;
goodMessage.innerHTML=goods[0].goodMessage;
goodPicture.src=goods[0].goodPicture;
goodPrice.innerHTML=goods[0].goodPrice;
goodId.innerHTML=goods[0].goodId;
}
});
};
};
</script>
</head>
<body>
<p>查询所有:<button id="all">点击查询</button></p>
<hr>
<div id="main" style="display:none">
<div id="goodId" ></div>
<p>商品名<div id="name"></div></p>
<p>商品概况<div id="goodTitle"></div></p>
<p>商品介绍<div id="goodMessage"></div></p>
<p>商品图片<img src="" id="goodPicture"></p>
<p>商品价格<div id="goodPrice"></div></p>
</div>
</body>
</html>