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);

单击图像时，我多次获得同一张桌子。请帮助我。

谨此问候， Saranya C

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);
});

Ajax调用加载器URL加载相同的div标签多次

1 个答案: