jQuery Ajax请求返回空数据时，如何重新提交含animalid的请求？

你的问题核心在于：当第一个Ajax请求返回空数据时，你只是获取了animalid变量，但没有发起第二个携带该参数的Ajax请求，而是直接把空的data插入到#show元素中，这就导致你看不到预期的请求结果，反而可能因为其他原因显示了animalid的数值。

另外，原代码里的逻辑也有冗余：不管data是否为空，你都执行了$("#show").html(data)，这在空数据的场景下毫无意义。我们可以把重复的Ajax请求逻辑抽成独立函数，让代码更清晰。

修正后的代码 #

$(document).ready(function() {
    // 封装重复的请求逻辑，复用性更高
    function loadAnimalContent(animalId) {
        $.ajax({
            type: 'POST',
            url: "/myurl/",
            data: { animalid: animalId }, // 明确参数名，避免简写可能的兼容问题
            success: function(data) {
                // 直接把返回结果插入到#show，若需二次判断可追加逻辑
                $("#show").html(data);
            }
        });
    }

    // 第一步：从Cookie获取animalid，发起初始请求
    const cookieAnimalId = $.cookie("cookieanimal");
    $.ajax({
        type: 'POST',
        url: "/myurl/",
        data: { animalid: cookieAnimalId },
        success: function(data) {
            // 判断返回数据是否为空
            if (!$.trim(data)) {
                // 数据为空时，获取下拉菜单第一个选项的value
                const animalId = $("div.dropdown-menu a:first-child").attr("value");
                // 发起第二个携带新animalid的请求
                loadAnimalContent(animalId);
            } else {
                // 数据正常，直接展示
                $("#show").html(data);
            }
        }
    });
});

关键修改点 #

1. 封装请求函数：把重复的Ajax请求逻辑放到loadAnimalContent函数里，避免代码重复，后续维护更方便。
2. 明确参数名：原代码里data: {cookieanimalid}是ES6属性简写，虽然大部分现代环境支持，但写成{ animalid: cookieAnimalId }更清晰，也兼容旧版jQuery。
3. 补充第二个请求：当第一个请求返回空数据时，获取新的animalid后，调用封装好的函数发起第二次请求，确保#show能加载到预期内容。
4. 优化逻辑分支：原代码里if/else分支都执行了相同的$("#show").html(data)，现在只有当数据正常时才直接展示，空数据则触发新请求。

额外注意事项 #

• 可以在控制台用console.log(animalId)打印一下，确认$("div.dropdown-menu a:first-child")确实能获取到正确的目标数值。
• 如果你的后端需要特定的参数名（比如原代码里的cookieanimalid），记得把data里的键名改成后端期望的名称。

内容的提问来源于stack exchange，提问作者user7362769