我如何更改 jsp 中带有自定义标签的列表?
how can i change list with custom tag in jsp?
我在 JSP 中遇到了自定义标签的以下问题。
html 页面加载结束时由 div 自定义标签生成的内容列表。
之后,我想用 ajax 的新数据替换列表。
首先,我清空了旧列表。我做了一个 html 字符串(pdListHtml),附加它。
但我根本无法获得任何新列表。
如果代码有问题,请指出我。
谢谢。
html.jsp
<ul class="pdImgType">
<c:forEach var="goods" items="${goods}">
<div class="pdList">
<pt:product prdNm="${goods.goods_name}" dispPrc="${goods.goods_origin_price }"/>
</div>
</c:forEach>
</ul>
Ajax JS
const filterParam = $("#submitForm").serializeArray();
$.ajax({
type : "post",
url : "/ctgrSearchFilter.do",
data : filterParam,
dataType : "json",
success : function(data) {
$(".pdImgType").empty();
const goods = data.result.goods;
for(let i=0 ; i < goods.length ; i++){
let pdListHtml = "";
pdListHtml += '<div class=\"pdList\">';
pdListHtml += '<pt\:product prdNm=\"'+ goods[i].goods_name +'\" dispPrc=\"'+ goods[i].goods_origin_price +'\"/>';
pdListHtml += '</div>';
$(".pdImgType").append(pdListHtml);
}
},
error : function(err) {
alert("error");
}
});
数据来自java
@RequestMapping(value = "/ctgrSearchFilter.do" , method = equestMethod.POST)
@ResponseBody
public JSONObject ctgrSrhFilter(HttpServletRequest request) throws Exception {
JSONObject json = new JSONObject();
ModelAndView mv = commSearchService.callSearchAllNewAPI(request);
logger.info(">>>> ctgr result mv : "+ mv);
json.put("result", mv.getModel());
return json;
}
控制台登录java
ctgr 结果 mv:ModelAndView:物化视图为 [null];模型是 {cateCntTot=0, cate=[], brand1List=[], delryList=[], total=1254, goods=[{goods_name=nice, goods_origin_price=109000}]}
您需要使用 data.goods
获取 goods
然后遍历它。另外,检查您的 json
是否有效。
演示代码 :
//your json response
var data = {
"cateCntTot": 0,
"cate": [],
"brand1List": [],
"delryList": [],
"total": 1254,
"goods": [{
"goods_name": "nice",
"goods_origin_price": 109000
}]
};
var pdListHtml = "";
///fetching data->goods
var goods = data.goods;
for (let i = 0; i < goods.length; i++) {
//your html
/*pdListHtml += '<div class=\"pdList\" style="background:yellow"><pt\:product prdNm=\"' + goods[i].goods_name + '\" dispPrc=\"' + goods[i].goods_origin_price + '\"/></div>';*/
//demo data to append
pdListHtml += '<div class=\"pdList\" style="background:lightblue">prdNm :' + goods[i].goods_name + ' <br/>dispPrc :' + goods[i].goods_origin_price + '</div>'
}
//add data under pdImgType class
$(".pdImgType").html(pdListHtml);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="pdImgType">
<c:forEach var="goods" items="${goods}">
<div class="pdList">
<pt:product prdNm="${goods.goods_name}" dispPrc="${goods.goods_origin_price }" />
</div>
</c:forEach>
</ul>
我在 JSP 中遇到了自定义标签的以下问题。
html 页面加载结束时由 div 自定义标签生成的内容列表。
之后,我想用 ajax 的新数据替换列表。
首先,我清空了旧列表。我做了一个 html 字符串(pdListHtml),附加它。
但我根本无法获得任何新列表。
如果代码有问题,请指出我。
谢谢。
html.jsp
<ul class="pdImgType">
<c:forEach var="goods" items="${goods}">
<div class="pdList">
<pt:product prdNm="${goods.goods_name}" dispPrc="${goods.goods_origin_price }"/>
</div>
</c:forEach>
</ul>
Ajax JS
const filterParam = $("#submitForm").serializeArray();
$.ajax({
type : "post",
url : "/ctgrSearchFilter.do",
data : filterParam,
dataType : "json",
success : function(data) {
$(".pdImgType").empty();
const goods = data.result.goods;
for(let i=0 ; i < goods.length ; i++){
let pdListHtml = "";
pdListHtml += '<div class=\"pdList\">';
pdListHtml += '<pt\:product prdNm=\"'+ goods[i].goods_name +'\" dispPrc=\"'+ goods[i].goods_origin_price +'\"/>';
pdListHtml += '</div>';
$(".pdImgType").append(pdListHtml);
}
},
error : function(err) {
alert("error");
}
});
数据来自java
@RequestMapping(value = "/ctgrSearchFilter.do" , method = equestMethod.POST)
@ResponseBody
public JSONObject ctgrSrhFilter(HttpServletRequest request) throws Exception {
JSONObject json = new JSONObject();
ModelAndView mv = commSearchService.callSearchAllNewAPI(request);
logger.info(">>>> ctgr result mv : "+ mv);
json.put("result", mv.getModel());
return json;
}
控制台登录java
ctgr 结果 mv:ModelAndView:物化视图为 [null];模型是 {cateCntTot=0, cate=[], brand1List=[], delryList=[], total=1254, goods=[{goods_name=nice, goods_origin_price=109000}]}
您需要使用 data.goods
获取 goods
然后遍历它。另外,检查您的 json
是否有效。
演示代码 :
//your json response
var data = {
"cateCntTot": 0,
"cate": [],
"brand1List": [],
"delryList": [],
"total": 1254,
"goods": [{
"goods_name": "nice",
"goods_origin_price": 109000
}]
};
var pdListHtml = "";
///fetching data->goods
var goods = data.goods;
for (let i = 0; i < goods.length; i++) {
//your html
/*pdListHtml += '<div class=\"pdList\" style="background:yellow"><pt\:product prdNm=\"' + goods[i].goods_name + '\" dispPrc=\"' + goods[i].goods_origin_price + '\"/></div>';*/
//demo data to append
pdListHtml += '<div class=\"pdList\" style="background:lightblue">prdNm :' + goods[i].goods_name + ' <br/>dispPrc :' + goods[i].goods_origin_price + '</div>'
}
//add data under pdImgType class
$(".pdImgType").html(pdListHtml);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="pdImgType">
<c:forEach var="goods" items="${goods}">
<div class="pdList">
<pt:product prdNm="${goods.goods_name}" dispPrc="${goods.goods_origin_price }" />
</div>
</c:forEach>
</ul>