在项目中遇到一个情况,需要动态获取后台的返回数据,并在前台渲染出来,并且能够根据所点击的不同标签,随时获取对应数据。在网上看到两种方法,一种是写一个动态创建div模板的函数,并将返回值作为参数在其中展示出来;一种是layui模板引擎进行数据渲染。
但是这种渲染方式在渲染完成之后不能获得后台返回的完整的数据,暂时相处一种解决办法:将返回值作为一个对象用JSON.stringify()转换成json字符串格式,用data()含函数存储在一个标签中,在需要获取的时候,用$.parseJSON()函数将json字符串转换成json对象,再获取想要的值。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css">
</head>
<body>
<div></div>
<script src="../../layuiadmin/layui/layui.js"></script>
<script>
layui.use(['jquery','layer'],function () {
var layer = layui.layer,
$ = layui.$;
var res = [
{ "switchGoodBList":[
{
"goodsB":"欢乐谷门票",
"switchrate":"7"
},
{
"goodsB":"欢乐谷门票",
"switchrate":"100"
},
{
"goodsB":"#jifen#",
"switchrate":"100"
}
],
"launchtime":"2018-10-11",
"goodsName":"七天酒店",
"launchusername":"柯南",
"count":"2"},
{ "switchGoodBList":[
{
"goodsB":"养乐多",
"switchrate":"7"
},
{
"goodsB":"养乐多",
"switchrate":"100"
},
{
"goodsB":"#jifen#",
"switchrate":"100"
}
],
"launchtime":"2018-10-11",
"goodsName":"七天酒店",
"launchusername":"柯南",
"count":"2"}
];
//存储的时候先将返回值转换成json字符串格式
var changeto = JSON.stringify(res);
console.log("json字符串格式:");
console.log(changeto);
//用data函数将参数附加在div上
$("div").data("testdata", changeto);
//获取的时候先将json字符串转换成json对象
var changeback = $("div").data("testdata");
var jsonobj = $.parseJSON(changeback);
console.log("json字对象格式:");
console.log(jsonobj);
//获取返回值
var goodsname = jsonobj[0].goodsName;
console.log("房间名称:");
console.log(goodsname);
var goodsB = jsonobj[0].switchGoodBList[1].goodsB;
console.log("交换对象:")
console.log(goodsB);
});
</script>
</body>
</html>
结果: