可以在一个或多个 Ajax 调用中显示来自不同 div 的多个 html 结果吗？

Question

想知道是否可以使用从一个或多个 Ajax 调用中提取的数据刷新多个 div，这些调用由同一个按钮调用。

我得到了正确的结果，只是很难显示多个 div 被 html 结果刷新。

我尝试了以下方法；

$(document).on('click', '#customButton', function(event) {

var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;

  $.ajax({
       url: "load1.php",
       data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
       type: 'post',
       success: function(result) {
          form_updated = true;
          $('#dd_stocktake_details').html(result);
         },
           error: function() {}
         });

});

$(document).on('click', '#customButton', function(event) {

var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;

  $.ajax({
       url: "load2.php",
       data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
       type: 'post',
       success: function(result2) {
          form_updated = true;
          $('#dd_stocktake_details_2').html(result2);
         },
           error: function() {}
         });

});

和

$(document).on('click', '#customButton', function(event) {

var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;

  $.ajax({
       url: "load1.php",
       data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
       type: 'post',
       success: function(result) {
          form_updated = true;
          $('#dd_stocktake_details').html(result);
         },
           error: function() {}
         });

         $.ajax({
              url: "load2.php",
              data: {'action' : 'search_prods', 'rangeDate_from' : rangeDate_from, 'rangeDate_to' : rangeDate_to},
              type: 'post',
              success: function(result2) {
                 form_updated = true;
                 $('#dd_stocktake_details_2').html(result2);
                 alert(result2);
                },
                  error: function() {}
                });

});

这两种方式都能让我正确地得到我想要的结果，但是这两个选项似乎每次都只显示第一个 div。

如果需要查看更多代码，请询问！

有任何想法吗？

Answer 1

您可以使用 Jquery When ref: https://api.jquery.com/jQuery.when/

        $(document).on('click', '#customButton', function (event) {

            var result1;
            var result2;
            var rangeDate_from = document.getElementsByName("rangeDate_from")[0].value;
            var rangeDate_to = document.getElementsByName("rangeDate_to")[0].value;
            $.when(
                $.ajax({
                    url: "load1.php",
                    data: { 'action': 'search_prods', 'rangeDate_from': rangeDate_from, 'rangeDate_to': rangeDate_to },
                    type: 'post',
                    success: function (result) {
                        form_updated = true;
                        result1 = result;
                    },
                    error: function () { }
                });

            $.ajax({
                url: "load2.php",
                data: { 'action': 'search_prods', 'rangeDate_from': rangeDate_from, 'rangeDate_to': rangeDate_to },
                type: 'post',
                success: function (result) {
                    form_updated = true;
                    result2 = result2
                },
                error: function () { }
            });

            ).then(function () {
                $('#dd_stocktake_details').html(result1);
                $('#dd_stocktake_details_2').html(result2);
            });

        });