URL-адрес загрузчика вызовов ajax загружает один и тот же тег div несколько раз

Question

Не могли бы вы помочь мне разобраться в этом вопросе, так как я только изучаю ajax и пытаюсь использовать его для моего требования.

Мои требования:

Когда я щелкаю конкретное изображение, оно должно вызывать ту же страницу, но загружать данные таблицы разными значениями в зависимости от названных значений параметров. Поэтому мне посоветовали перейти на AJAX, поскольку он не перезагружает всю страницу.

Jquery

    $("#goToCostTypeID").click(function () {
                 var costType = document.getElementById("costType").value;

                 if(costType == "Actual"){
                       costType = "Budget";
                       document.getElementById("costType").value = "Budget";

                 }  //if actuals ends
                 if(costType == "Budget"){
                       costType = "Forecast";
                       document.getElementById("costType").value = "Forecast";

                 }  //if actuals ends
                 if(costType == "Forecast"){
                       costType = "Actual";
                       document.getElementById("costType").value = "Actual";

                 }  //if actuals ends

                 var Budget = costType;                          

                  $.ajax({

                         dataType : "html",
                         url:'my.jsp?productID=6&appID=6&txtHidden=Costs&mode=Edit&costType='+costType,
                          type:'POST',
                         contentType :'application/x-www-form-urlencoded; charset=UTF-8',
                          data:{costType:Budget},
                          success:function(result){ 
                              console.log("YES");
                              $("#costContent").load('my.jsp?productID=6&appID=6&txtHidden=Costs&mode=Edit&costType='+costType);
                        }   
                   });


            });

HTML

     <td width="2%" id="goToCostTypeID">&nbsp;<a href="#" ><img src="../images/goto.png"/></a></td>

    <div id="costContent">   

    <td width="13%" ><input type="hidden" id="cost_type_<%=i+1 %>" name="cost_type_<%=i+1 %>[]" value="<%=Bean.getLevelTwoOrgId()%>"/><%=Bean.getCcLevel2()%></td>
     <td width="12%" ><input type="hidden" id="intival_<%=i+1 %>" name="intival_<%=i+1 %>[]" value="<%=Bean.getInitProj()%>"/><%=Bean.getInitProj()%></td>

JAVA

       String costType = request.getParameter("costType");

      uploadCostList =DAO.doGetAppCostUploadedList(PK_AppID,costType,iPresentYear);

Я получаю одну и ту же таблицу несколько раз, когда нажимаю на изображение. Пожалуйста, помогите мне.

С уважением, Саранья С

Answer 1

Насколько я могу понять ваши требования, вам нужно просто сделать что-то вроде этого:

$("#goToCostTypeID").on('click', function() {
  const currentCostType = $('#cost_type').val();
  const nextCostType = currentCostType === 'Actual' ? 'Budget' : currentCostType === 'Budget' ? 'Forecast' : 'Actual';
  $('#cost_type').val(nextCostType)

  const url = 'my.jsp?' + $.param({
    productID: '68',
    appID: '68',
    txtHidden: 'Costs',
    mode: 'Edit',
    costType: $("#costType").val()
  });
  $("#costContent").load(url);
});