同一页面上的两个 jQuery Ajax 调用，一个有效，另一个无效

Posted 2023-05-08

【中文标题】同一页面上的两个 jQuery Ajax 调用，一个有效，另一个无效

【英文标题】：Two jQuery Ajax calls on the same page, one works the other doesn't

【发布时间】：2022-01-14 21:41:54

【问题描述】：

我在同一页面上有两个 Ajax 调用，第一个运行良好，所以我复制了它并更改了必要的值，因此它们是独立的，但是，第二个 Ajax 调用不起作用。我已经在一个单独的页面上对其进行了测试，它工作正常，只有当两个调用都在同一页面上时它才不起作用，我错过了什么吗？

jQuery('#lampbase').on('change', function()
  var basevalue = $(this).val();
  jQuery.ajax(
    url: 'basesfetch.php',
    method: 'post',
    data: basevalue1: basevalue,
    success: function(result)                    
      $("#baseresponse").html(result);
      $( "select" ).on('change',function() 
        var str = "";
        // For multiple choice
        $( "select option:selected" ).each(function() 
          str += $( this ).val() + " "; 
          console.log(str);
        );
      );

      jQuery('#lampbase').on('change', function()
        $(".lampoptions").fadeIn();
      );
      
      jQuery("#lampcolor").change(function(e)
        var DefaultOption = $('option:selected', this).data('code');
        $("#detailcolor option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#FlexColour option[data-code='" + DefaultOption + "']").prop("selected", true);
        $("#Switch option[data-code='" + DefaultOption + "']").prop("selected", true);
      );
      
      $("select option").val(function(idx, val) 
        $(this).siblings("[value='"+ val +"']").hide();
      );          
    
  );
);

jQuery('#lampshade').on('change', function()
  var shadevalue = $(this).val();
  jQuery.ajax(
    url: 'shadefetch.php',
    method: 'post',
    data: shadevalue1: shadevalue,
    success: function(result)                    
      $("#shaderesponse").html(result);
      $( "select" ).on('change',function() 
        var str = "";
        // For multiple choice
        $( "select option:selected" ).each(function() 
          str += $( this ).val() + " "; 
          console.log(str);
        );
      );
    
  );
);

HTML 代码：

<select id="lampbase">
  <option value="first">Select</option>
  <?php 
    $sql = mysqli_query($connection, "SELECT DISTINCT ProductName FROM TableLamps_CSV");
    while ($row = $sql->fetch_assoc())
      $productname = $row['ProductName'];
      echo "<option value=\"$productname\">" . $row['ProductName'] . "</option>";
    
  ?>
</select>

<select id="lampshade">
  <option value="first">Select</option>
  <?php 
    $sql = mysqli_query($connection, "SELECT DISTINCT ShapeName FROM shadetable");
    while ($row = $sql->fetch_assoc())
      $shapename = $row['ShapeName'];
      echo "<option value=\"$shapename\">" . $row['ShapeName'] . "</option>";
    
  ?>
</select>

【问题讨论】：

你能显示你的html代码吗？如果你的#lampshade 是select，那么在你的第一个ajax 成功时，你就写完了它的change 事件。

感谢您的回复！它们确实都是选择框，我已经添加了 HTML。

定义“不起作用”。您的开发者控制台中有任何错误吗？

不，控制台中没有与此相关的错误，它们独立工作。不起作用我的意思是，没有任何事情发生，这很奇怪 - 成功的东西不会触发，但它们在单独的页面上都可以正常工作。现场示例在这里：whiz.cz/ItQ

那么您可以在控制台的网络选项卡中看到请求发生了吗？请求是否都成功（2XX）？

【参考方案1】：

代码存在一些问题，其中一些您可能还没有遇到过。但是阻止您的第二个 AJAX 调用工作的方法非常简单：

问题 1：重复 ID

您在 SO 上共享的代码中未显示此处，但我检查了您链接到的网站 (https://whiz.cz/ItQ)，发现您有两个具有相同 ID 的元素 - lampshade。

我们正在查看<select>：

<select id="lampshade">

但是包含该选择的div 具有相同的 ID：

<div class="container-fluid" ... id="lampshade">

IDs must be unique 在页面上。如果您有重复项，并将 ID 用作 jQuery 选择器，only the first one will match。在这种情况下，当select 更改时要运行的change 事件处理程序实际上绑定到div，并且只有div。 divs 没有更改事件，因此永远不会触发。事件处理程序根本没有附加到select。

问题 2：嵌套事件处理程序

当前代码添加了事件处理程序在其他事件处理程序中。例如，在#lampbase 更改处理程序中，添加一个select 更改处理程序、另一个#lampbase 更改处理程序和一个#lampcolor 处理程序。这样做的问题是事件处理程序不会覆盖、更新或替换以前的处理程序。它们都只是堆叠起来，它们都保持活跃，它们都会运行。在这种特殊情况下，这意味着每次更改 #lampbase 选择时，都会添加 3 个新的处理程序。

Here's a simple JSFiddle demo 展示了像这样定义的事件处理程序是如何堆叠起来的。

如果您返回并再次更改 #lampbase 选择，则会在现有 4 个处理程序之上添加 3 个新处理程序，总共留下 7 个，并且它们将全部在每次相关选择器时运行被触发。下次更改 #lampbase 时，原始更改处理程序运行，$(".lampoptions") 淡入 3 次，从选定选项构建 str 的代码运行 4 次。

在这种特殊情况下，只要您的用户不经常返回并更改选择，这可能不会导致任何严重问题。但是您可以想象这很容易变得非常混乱，并且您可能会开始注意到您的页面在所有那些重复的处理程序运行时变得缓慢。

最简单的解决方法是在任何可能重复运行的用户交互之外只定义一次处理程序。如果他们需要使用页面的当前状态 - 例如当前选择的选项 - 让他们确定它们何时运行（而不是在状态是您想要的状态时在流中的点定义它们）。

请注意，当用户与页面交互时，还可以使用 .on() 和 .off() 动态添加/删除处理程序，但这里不需要额外的复杂性和代码。

小事一：

无需为 #lampbase 添加单独的更改处理程序来执行淡入 - 您已经有该元素的更改处理程序，只需在其中执行。

小事2：

如果您在其他事件处理程序之外定义相同的select 处理程序，则无需两次定义它。你实际上并没有对它生成的str 做任何事情，但也许这就是你接下来要做的事情:-)

小事3：

这一行：

$("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);

是重复的，可能只是一个错字。

这是应用了这些建议/修复的代码：

jQuery('#lampbase').on('change', function () 

    var basevalue = $(this).val();

    jQuery.ajax(
        url: 'basesfetch.php',
        method: 'post',
        data: 
            basevalue1: basevalue
        ,
        success: function (result) 
            $("#baseresponse").html(result);

            // No need for a separate handler to do this
            $(".lampoptions").fadeIn();

            // I am not sure what this is doing, but note it is running 
            // for every select on the page.
            $("select option").val(function (idx, val) 
                $(this).siblings("[value='" + val + "']").hide();
            );
        
    );
);

jQuery('#lampshade').on('change', function () 

    var shadevalue = $(this).val();

    jQuery.ajax(
        url: 'shadefetch.php',
        method: 'post',
        data: 
            shadevalue1: shadevalue
        ,
        success: function (result) 
            $("#shaderesponse").html(result);
        
    );
);

jQuery("#lampcolor").change(function (e) 
    var DefaultOption = $('option:selected', this).data('code');
    $("#detailcolor option[data-code='" + DefaultOption + "']").prop("selected", true);
    $("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);
    // Duplicated, typo?
    // $("#lampholder option[data-code='" + DefaultOption + "']").prop("selected", true);
    $("#FlexColour option[data-code='" + DefaultOption + "']").prop("selected", true);
    $("#Switch option[data-code='" + DefaultOption + "']").prop("selected", true);
);

// Only necessary to define this once, and outside any other handler
$("select").on('change', function () 
    var str = "";
    // For multiple choice
    $("select option:selected").each(function () 
        str += $(this).val() + " ";
        console.log(str);
    );
);