可以在一個或多個 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);
            });

        });