I faced following problem with custom tag in JSP. html content list generated by div custom tag when page loading end. after that, i want to replace the list with ajax`s new data. first, I emptied old list. and i made a html string(pdListHtml), append it. but I cant get any new list at all.
please point me out if there is something wrong with the code. thanks.
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");
}
});
data from 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;
}
console log in java
ctgr result mv: ModelAndView: materialized View is [null]; model is {cateCntTot=0, cate=[], brand1List=[], delryList=[], total=1254, goods=[{goods_name=nice, goods_origin_price=109000}]}
You need to get goods
using data.goods
and then loop over it.Also,check if your json
is valid or not.
Demo Code :
//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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.