как я могу изменить список с помощью специального тега в jsp?

Question

У меня возникла следующая проблема с пользовательским тегом в JSP. html список содержимого, созданный настраиваемым тегом div при завершении загрузки страницы. после этого я хочу заменить список новыми данными ajax. Сначала я очистил старый список. и я сделал строку html (pdList Html), добавьте ее. но я вообще не могу получить новый список.
пожалуйста, укажите мне, если что-то не так с кодом. спасибо.

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 result mv: ModelAndView: материализованное представление [null]; модель: {cateCntTot = 0, cate = [], brand1List = [], delryList = [], total = 1254, goods = [{goods_name = nice, goods_origin_price = 109000}]}

Answer 1

Вам нужно получить goods, используя data.goods, а затем l oop поверх него. Также проверьте, действителен ли ваш 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>