最近在写web前端的时候,我遇到的问题是这样的,用Ajax接收到json数据,我想用sessionStorage在前端进行存储,以便我可以在其他页面进行使用。
如果使用Ajax接收JSON对象,建议Ajax接收的数据格式设置为‘text’
即"dataType":“text”
$.ajax({
"url":"/WangYiYun/SelectUserSongListOfUserId?userId="+userId,
"type":"POST",
"data":{},
"async" : true,
"dataType":"text",
"success":function(data){
sessionStorage.setItem("allSongListJSON",data);
window.main.location.href = "MyMusicIframe.jsp";
},
"error":function(err){
alert("出现异常");
}
})
在Ajax接收到的数据是以原格式接收的,也可以正常输出,但使用sessionStorage进行存取
时我发现使用sessionStorage存储数据存取数据时,会自动把其他类型的数据转成字符串,这就要求在其他页面接收的时候转换成json格式,才能够进行读取json中的数据。
Ajax接收到的后端传递过来的数据形式用字符串输出格式为下面这样:
var data = [{"userCreateSongList":
[
{"accessCount":0,"collectionCount":0,"introduce":"这是我喜欢的歌曲","songListId":1,"songListName":"喜欢的","songListStateId":0,"tags":"流行 摇滚 乡村","typeId":1,"userId":1},
{"accessCount":0,"collectionCount":0,"introduce":"这是我喜欢的歌曲","songListId":2,"songListName":"喜欢的","songListStateId":0,"tags":"流行 摇滚 乡村","typeId":1,"userId":1}
],
"userCollection":
[
{"accessCount":0,"collectionCount":0,"introduce":"这是我喜欢的歌曲","songListId":20,"songListName":"UI哦","songListStateId":0,"tags":"流行 乡村","typeId":1,"userId":1},
{"accessCount":0,"collectionCount":0,"introduce":"这是我喜欢的歌曲","songListId":21,"songListName":"德仁堂","songListStateId":0,"tags":"流行","typeId":1,"userId":1}
]
}]
整体接收过来的数据有点复杂,整体最外层是一个数组,数组中是一个JSON对象,里面有两个key,‘userCreateSongList’与‘userCollection’,这两个key对应的值又分别是一个数组,数组中存储的值是JSON对象,里面就是键值对。
当我使用sessionStorage进行接收数据
var dataStr = sessionStorage.getItem('dataSession');
接收到的数据并不是一个数组,而是一个长字符串,这就没办法用数组遍历来进行JSON数据输出,这就要求先把“数组样式 ”的字符串转换成数组:
这里使用js中的eval()方法进行转换:
var dataArr= eval("(" + dataStr + ")");
直接把数组样式的字符串转换成了数组
然后就可以直接遍历数组,来取其中的JSON数据即可
for(var i = 0; i < dataArr.length; i++){
var dataArrJSON = dataArr[i].userCreateSongList;//key为userCreateSongList的JSON数组
var dataArrJSONLength = dataArrJSON.length;
for(var j = 0; j < dataArrJSONLength ; j++){//遍历key为userCreateSongList的JSON数组
var tags = dataArrJSON [j].tags;//获取json值
var accessCount = dataArrJSON [j].accessCount;
}
}