首页 新闻 会员 周边

js获取的json数据怎么展现再jsp页面上

0
悬赏园豆：200 [待解决问题]

1.先看前端显示效果：

数据显示的格式如上图
2.前端jsp页面代码：
<input type="hidden" id="basepath" name="basepath" value="<%=basePath %>"/>
<input type="hidden" id="id" name="id" value=""/>
<form action="newproduct/qtcpList" method="post">

<div>
<!--表头部分 -->
<table class="table1">
<tr class="title">
<td class="td1" id="title"></td>
</tr>
</table>
<!--表体部分 -->
<c:forEach items="${list}" var="list">
<ul class="list-group">
<a href="#" class="list-group-item">
<table class="table2">
<tr>
<td class="td2">
<table class="table3">
<tr>
<td class="td3">
<div class="td4" >
<c:choose>
<c:when test="${list.SYLLX=='1' }">
<c:out value="${list.YQGDSYL}"></c:out>
</c:when>
<c:when test="${list.SYLLX=='2' }">
<img src="${pageContext.request.contextPath}/resources/images/productlist/icon_fdP.png">
</c:when>
<c:when test="${list.SYLLX=='3' }">
<c:out value="${list.YQGDSYL}"></c:out>
</c:when>
<c:when test="${list.SYLLX=='4' }">
<c:out value="${list.YQGDSYL}"></c:out>
</c:when>
</c:choose>
</div>
<div class="td5">预期年化</div>
</td>
<td class="td6">
<c:if test="${list.SYLLX=='1' }">
<img src="${pageContext.request.contextPath}/resources/images/productlist/icon_gP.png">
</c:if>
<c:if test="${list.SYLLX=='2' }">
<%-- <img src="${pageContext.request.contextPath}/resources/images/productlist/icon_fdP.png"> --%>
</c:if>
<c:if test="${list.SYLLX=='3' }">
<img src="${pageContext.request.contextPath}/resources/images/productlist/icon_gjfP.png">
</c:if>
<c:if test="${list.SYLLX=='4' }">
<img src="${pageContext.request.contextPath}/resources/images/productlist/icon_gP.png">
</c:if>
</td>
</tr>
</table>
</td>
<td class="td7">
<table class="table4">
<tr>
<td class="td8"><c:out value="${list.CPMC}"></c:out></td>
<td></td>
<td class="td9">
<c:if test="${list.CPZTSM=='存续期' }">
<img src="${pageContext.request.contextPath}/resources/images/productlist/icon_cxqP.png">
</c:if>
<c:if test="${list.CPZTSM=='待发行' }">
<img src="${pageContext.request.contextPath}/resources/images/productlist/icon_dfxP.png">
</c:if>
<c:if test="${list.CPZTSM=='募集期' }">
<img src="${pageContext.request.contextPath}/resources/images/productlist/icon_mjqP.png">
</c:if>
<c:if test="${list.CPZTSM=='已结束' }">
<img src="${pageContext.request.contextPath}/resources/images/productlist/icon_yjsP.png">
</c:if>

</td>
</tr>
<tr>
<tr>
<td class="td10" >管理人</td>
<td class="td11"><c:out value="${list.GLR}"></c:out></td>
<td>&nbsp;</td>
</tr>
<tr style="width: 100%;">
<td class="td10">产品类型</td>
<td class="td11"><c:out value="${list.CPLX_MC}"></c:out></td>
<td class="td12">立即投资</td>
</tr>
<tr>
<td class="td13"><c:out value="${list.CXQX}"></c:out>天&nbsp;<span class="td15">期化</span></td>
<td class="td14"><c:out value="${list.RGQD}"></c:out>万&nbsp;<span class="td15">起够&nbsp;&nbsp;&nbsp;&nbsp;|
</span><c:out value="${list.FXKSR}"></c:out>&nbsp;<span class="td15">起够</span></td>
</tr>
</table>
</td>
</tr>
</table>
</a>
</ul>
<div id="test"><c:out value="${list.message}"></c:out></div>
</c:forEach>
</div>
</form>
</body>
</html>
3.js获取的json数据如下：
{
"code": 1,
"message": "成功",
"result": {
"count": 68,
"ismore": 1,
"records": [
{
"CPDM": "SF3873",
"CPLX": 5200,
"CPLX_MC": "非公开发行公司债",
"CPMC": "天风2016短债01",
"CPZTSM": "存续期",
"CXQX": "363",
"DW": "份",
"FXKSR": "20160127",
"GLR": "天风证券",
"ID": "6515",
"RGQD": 10000,
"SYLLX": 1,
"YQFDSYL": "--",
"YQGDSYL": "4.95%"
},
{
"CPDM": "SF1899",
"CPLX": 5501,
"CPLX_MC": "资产支持证券",
"CPMC": "公投曲胜高速公路专项计划",
"CPZTSM": "存续期",
"CXQX": "4374",
"DW": "份",
"FXKSR": "20160121",
"GLR": "招商证券资产管理有限公司",
"ID": "6482",
"RGQD": 50000,
"SYLLX": 3,
"YQFDSYL": "基准利率：五年期以上贷款基准利率;利差：下浮0.01%",
"YQGDSYL": "4.03%"
},
{
"CPDM": "SF3580",
"CPLX": 5200,
"CPLX_MC": "非公开发行公司债",
"CPMC": "16新沂债01",
"CPZTSM": "存续期",
"CXQX": "1096",
"DW": "份",
"FXKSR": "20160120",
"GLR": "浙商证券",
"ID": "6477",
"RGQD": 5000,
"SYLLX": 1,
"YQFDSYL": "--",
"YQGDSYL": "6.2%"
},
{
"CPDM": "SF2230",
"CPLX": 5200,
"CPLX_MC": "非公开发行公司债",
"CPMC": "15九洲债第二期",
"CPZTSM": "存续期",
"CXQX": "731",
"DW": "份",
"FXKSR": "20160107",
"GLR": "国海证券",
"ID": "6400",
"RGQD": 100000,
"SYLLX": 1,
"YQFDSYL": "--",
"YQGDSYL": "7.0%"
},
{
"CPDM": "SF3001",
"CPLX": 5501,
"CPLX_MC": "资产支持证券",
"CPMC": "文科一期优先A级",
"CPZTSM": "存续期",
"CXQX": "820",
"DW": "份",
"FXKSR": "20151230",
"GLR": "恒泰证券",
"ID": "6345",
"RGQD": 10000,
"SYLLX": 1,
"YQFDSYL": "--",
"YQGDSYL": "0.1%"
},
{
"CPDM": "SF3003",
"CPLX": 5501,
"CPLX_MC": "资产支持证券",
"CPMC": "文科一期优先C级",
"CPZTSM": "存续期",
"CXQX": "1369",
"DW": "份",
"FXKSR": "20151230",
"GLR": "恒泰证券",
"ID": "6344",
"RGQD": 10000,
"SYLLX": 1,
"YQFDSYL": "--",
"YQGDSYL": "7.99%"
},
{
"CPDM": "SF3002",
"CPLX": 5501,
"CPLX_MC": "资产支持证券",
"CPMC": "文科一期优先B级",
"CPZTSM": "存续期",
"CXQX": "912",
"DW": "份",
"FXKSR": "20151230",
"GLR": "恒泰证券",
"ID": "6343",
"RGQD": 10000,
"SYLLX": 1,
"YQFDSYL": "--",
"YQGDSYL": "6.95%"
},
{
"CPDM": "SF2160",
"CPLX": 5501,
"CPLX_MC": "资产支持证券",
"CPMC": "德邦-九洲新世界优先A4档",
"CPZTSM": "存续期",
"CXQX": "1457",
"DW": "份",
"FXKSR": "20151229",
"GLR": "德邦创新资本",
"ID": "6329",
"RGQD": 10000,
"SYLLX": 1,
"YQFDSYL": "--",
"YQGDSYL": "6.6%"
},
{
"CPDM": "SF2157",
"CPLX": 5501,
"CPLX_MC": "资产支持证券",
"CPMC": "德邦-九洲新世界优先A2档",
"CPZTSM": "存续期",
"CXQX": "727",
"DW": "份",
"FXKSR": "20151229",
"GLR": "德邦创新资本",
"ID": "6324",
"RGQD": 10000,
"SYLLX": 1,
"YQFDSYL": "--",
"YQGDSYL": "6.0%"
},
{
"CPDM": "SF2167",
"CPLX": 5501,
"CPLX_MC": "资产支持证券",
"CPMC": "德邦-九洲新世界次级",
"CPZTSM": "存续期",
"CXQX": "1823",
"DW": "份",
"FXKSR": "20151229",
"GLR": "德邦创新资本",
"ID": "6327",
"RGQD": 10000,
"SYLLX": 1,
"YQFDSYL": "--",
"YQGDSYL": "0.0%"
}
],
"redisname": "qtRedis",
"total": 58,
"type": "其他产品"
}
}
4。注意数据已经拿到了
关键是怎么把数据填充到jsp页面中，并动态生成列表。

大海任我游的主页 大海任我游 | 初学一级 | 园豆：2
提问于：2016-04-07 16:29
< >
分享
所有回答(5)
0

比如你返回的数据为data 可能你的数据是通过ajax获取的或者其他方式，可以在返回方法或者另写方法里面这样

success : function(data) {
var recordsJson=data.records;//这里面是你demo的下面列表的值
var typeJson=data.type;//json数据里面有type我猜是demo列表上面其他产品字样

for (var i=0; i < recordsJson.length; i ++) {
var recordsJsonList = recordsJson[i];
$(".").append("在这里面构建一条列表的数据可用用到recordsJsonList.GLR类似形式的动态数据");
}

}

 

仅提供思路，有啥问题可以交流。

孤王就是朕 | 园豆：248 (菜鸟二级) | 2016-04-07 16:56
0

avalon  angular 等等js库可以帮到你。

如果你喜欢原生javascript，也可以自己写，例如：

window.onload = function () {
            var div = document.createElement("div");
            div.innerHTML = "hello world";
            document.body.appendChild(div);
        };

 

 

写代码的小2B | 园豆：4371 (老鸟四级) | 2016-04-07 17:04
0

这个不错，以前做java用的就是这个Jquery模板   http://www.jb51.net/article/27747.htm 你可以看看。

大楚打码人 | 园豆：4313 (老鸟四级) | 2016-04-07 17:13
0

用模板吧 给你一段代码做参考 

// 获得一个json 
var cartItemList = dataHelper.get_CartItemList();
// 创建一个ejb模板对象
                    var tmplitem = new EJS({ text: $(".cart-detail-item").val()});
// 遍历模板对象 生成html
                    $(".J-cart-detail .J-container").html("");
                    var html = "";
                    for(var i = 0; i <cartItemList.length; i++)
                    {
                        var currentData = cartItemList[i];
                        html+=tmplitem.render(currentData);
                    }
// 吧html插入到 J-container 中
                    $(".J-cart-detail .J-container").html(html);

 

 

<textarea class="cart-detail-item" style="display: none">
        <div class="item J-item J-item-<%=ShopDishInfoId%> J-input-container clearfix" data-id="<%=ShopDishInfoId %>" data-subid="<%=ShopDishTasteId%>">
            <div class="oper-container">
                <span class="J-delete-oper delete-oper oper-icon"></span><span class="J-num num"><%=Num%></span><span class="J-add-oper add-oper oper-icon"></span>
            </div>
            <div class="item-info">
                <div class="item-name">
                    <%=Name %></div>
                <div class="item-price J-item-price">
                    <span class="value J-value">¥<%=Price %></span>
                </div>
            </div>
        </div>
    </textarea>

 

小眼睛老鼠 | 园豆：2731 (老鸟四级) | 2016-04-07 17:57
0

如果是前端获取到的json数据，那就和jsp没什么关系。

你要做的是把数据拼接成html，然后append到你的代码中。

幻天芒 | 园豆：37175 (高人七级) | 2016-04-09 08:57

想法是对的.我已经想出来了

支持(0) 反对(0) 大海任我游 | 园豆：2 (初学一级) | 2016-04-11 09:59
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。