ajax调用加载器url多次加载相同的div标签问题答案

【问题标题】：ajax call loader url loads same div tag multiple time issueajax调用加载器url多次加载相同的div标签问题
【发布时间】：2019-01-16 12:26:47
【问题描述】：

您能否帮我解决这个问题，因为我只是学习 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);

当我点击图片时，我多次获得同一张桌子。请帮帮我。

问候，萨兰亚C

【问题讨论】：

据我所知，您的条件逻辑完全被破坏了。它将始终返回“实际”。我不明白这个逻辑应该做什么。我建议您尝试删除这些条件并仅使用 document.getElementById("costType").value 调用 ajax
嗨 dganenco，我想根据 onclick 更改文本，例如实际、预算或预测，是的，你现在只有实际被多次调用。
你希望我如何更改 ajax 调用？你能解释一下吗？
首先页面加载了“实际”数据。当单击图像时，它应该加载预算等。所以我分配的值就像它在实际页面中并且用户点击文本中的下一个值应该更改为“预算”并加载预算数据
你可能想再看看你的逻辑。您正在进行 ajax 调用，这是对服务器的请求，当它完成时，在成功内，您使用 load 调用发出另一个请求。您应该能够使用 dganenco 的示例，或者使用您的第一个 ajax 请求的结果数据。

标签： java jquery ajax jsp

【解决方案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);
});

【讨论】：

嗨 dganenco，感谢您的简化更改。但问题仍然存在。1）表被加载两次，2）相同的实际值被传递。请帮帮我
非常感谢 dganenco 和 ChrisThompson。
$('#costContent').remove();在 onclick 函数和 $("#costContent").load(url);在 URL 框架之后。但是删除了整个表并且不加载
类似于.empty()，.remove() 方法从 DOM 中取出元素。当您想要删除元素本身以及其中的所有内容时，请使用.remove()。除了元素本身之外，所有与元素关联的绑定事件和 jQuery 数据都将被删除。你可以试试$('#costContent').html("");
adis 和 dganenco 非常感谢:):)。它按预期工作。你们都救了我:) 谢谢