同一按钮触发Ajax调用，如何刷新多个Div显示不同HTML结果？

看起来你已经离解决问题很近了！你提到两种写法都能拿到正确结果，但只有第一个Div能正常刷新，咱们一步步排查问题，再给出优化方案：

1. 先排查核心问题：第二个Ajax的回调是否真的生效？ #

你在第二种写法里加了alert(result2)，先确认这个弹窗有没有正常弹出：

• 如果弹窗弹出来了，说明请求确实成功了，那问题大概率出在目标DOM元素上：
  • 检查#dd_stocktake_details_2的拼写是否完全正确（比如大小写、下划线数量、有没有和其他元素ID重复）
  • 在回调里加一行console.log($('#dd_stocktake_details_2'))，看控制台输出的元素长度是不是1，如果是0，就是选择器找不到对应的元素
• 如果弹窗没弹出来，说明第二个Ajax的回调根本没执行，那要检查：
  • 浏览器控制台有没有报错（比如网络请求失败、语法错误）
  • 是不是按钮的默认行为（比如表单提交）导致页面刷新，打断了后续代码执行？

2. 修复最可能的坑：阻止按钮默认行为 #

如果你的#customButton是表单内的提交按钮（<button type="submit">），点击后会触发表单提交，导致页面刷新——这会直接覆盖第二个Div的更新！
一定要在事件处理函数开头加这行代码：

event.preventDefault();

3. 优化代码：合并事件+用Promise.all管理多请求 #

你的两种写法都可以优化，建议把事件绑定合并成一个，同时用Promise.all更优雅地管理多个异步请求：

$(document).on('click', '#customButton', function(event) {
    // 阻止默认行为，避免页面刷新打断请求
    event.preventDefault();
    
    // 统一获取参数，避免重复代码
    var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
    var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;
    const requestData = {
        'action': 'search_prods',
        'rangeDate_from': rangeDate_from,
        'rangeDate_to': rangeDate_to
    };

    // 把两个Ajax请求包装成Promise
    const load1Request = $.ajax({
        url: "load1.php",
        data: requestData,
        type: 'post'
    });

    const load2Request = $.ajax({
        url: "load2.php",
        data: requestData,
        type: 'post'
    });

    // 等待两个请求都完成后再更新DOM
    Promise.all([load1Request, load2Request])
        .then(([result1, result2]) => {
            form_updated = true;
            $('#dd_stocktake_details').html(result1);
            $('#dd_stocktake_details_2').html(result2);
            console.log('两个Div都更新完成啦！');
        })
        .catch((error) => {
            console.error('某个请求失败了:', error);
        });
});

4. 额外检查点 #

• 确认两个PHP接口（load1.php和load2.php）返回的HTML内容格式正确，没有语法错误
• 如果页面是动态生成的#dd_stocktake_details_2，要确保在Ajax请求发起前，这个元素已经存在于DOM中

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