在ajax回調中使用ajax回調代替php的div內容？

以下代碼位於index.php中。點擊時，$選擇變量通過ajax傳遞給ajax.php，後者處理數據並用html代替＃div1。在ajax回調中使用ajax回調代替php的div內容？

<script> 
$(document).ready(function(){ 
    $(".header").on("click", function(){ 
     var $selection = 'data to be transmitted'; 
     $.ajax({ 
      type: 'GET', 
      url: 'ajax.php', 
      data: { 'selection' : $selection }, 
      success: function(data) { 
       $("#div1").html(data); 
      } 
     }); 
    }); 
}); 
</script>

然後，ajax.php使用$ _GET ['selection']處理$選擇。然而，在ajax.php年底位於另一個Ajax調用ajax2.php，傳遞$選擇2：

<script> 
$(document).ready(function(){ 
    $(".header").on("click", function(){ 
     var $selection2 = 'depends on $selection from ajax.php'; 
     $.ajax({ 
      type: 'GET', 
      url: 'ajax2.php', 
      data: { 'another_selection' : $selection2 }, 
      success: function(data) { 
       console.log(data); 
       $("#div2").html(data); 
      } 
     }); 
    }); 
}; 
</script>

兩個DIV1和DIV2在index.php文件中找到。我的問題是第二次ajax調用（對ajax2.php）不起作用 - 它不會用從ajax2.php接收到的html代替＃div2。

任何想法？我知道被返回的數據是正確的，因爲我在控制檯中記錄了它，並且它是正確的html。我的猜測是「$（」＃div2「）.html（data）;」行不起作用，因爲它在ajax.php文件中找到，而不是index.php，其中＃div2實際存在。

來源

2017-06-02 titan54

你知道第二個腳本實際上並不_make_一個AJAX請求，但只有一個元素上註冊了一個單擊處理？（只有當該點擊事件發生時，AJAX請求才會被執行。） – CBroe

爲什麼不從第一個AJAX調用的'success'函數調用？或者甚至更好，只需在一個請求中返回所需的所有數據 –

遇到綁定/常規衝突，嘗試這些AJAX調用統一成一個，內回調或外部：

內回調：

<script> 
$(document).ready(function(){ 
    $(".header").on("click", function(){ 
     var $selection = 'data to be transmitted'; 
     $.ajax({ 
      type: 'GET', 
      url: 'ajax.php', 
      data: { 'selection' : $selection }, 
      success: function(data) { 
       $("#div1").html(data); 
       var $selection2 = 'depends on $selection from ajax.php'; 
       $.ajax({ 
       type: 'GET', 
       url: 'ajax2.php', 
       data: { 'another_selection' : $selection2 }, 
       success: function(data) { 
        console.log(data); 
        $("#div2").html(data); 
       } 
       }); 
      } 
     }); 

    }); 
}); 
</script>

Ouside回調：

<script> 
$(document).ready(function(){ 
    $(".header").on("click", function(){ 
     var $selection = 'data to be transmitted'; 
     $.ajax({ 
      type: 'GET', 
      url: 'ajax.php', 
      data: { 'selection' : $selection }, 
      success: function(data) { 
       $("#div1").html(data); 
      } 
     }); 
      if ($selection == something) 
       var $selection2 = 'depends on $selection from ajax.php'; 
       $.ajax({ 
       type: 'GET', 
       url: 'ajax2.php', 
       data: { 'another_selection' : $selection2 }, 
       success: function(data) { 
        console.log(data); 
        $("#div2").html(data); 
       } 
       }); 

    }); 
}); 
</script>

但最好的辦法是將ajax.php和ajax2.php例程合併爲一個，開發一個更簡潔的腳本：

<script> 
$(document).ready(function(){ 
    $(".header").on("click", function(){ 
     var $selection = 'data to be transmitted'; 
     if ($selection == something) 
      var $selection2 = 'selection2 data/condition that depends selection'; 
     $.ajax({ 
      type: 'GET', 
      url: 'ajax.php', 
      data: { 
       'selection': $selection, 
       'anotherselection': $selection2   
       }, 
      success: function(data) { 
       $("#div1").html(data); 
       $("#div2").html(data); 
      } 
     }); 

    }); 
}); 
</script>

到PHP：

<?php 
if (isset($_GET['selection'])){ 
    //first ajax routine 
} 

if (isset($_GET['anotherselection'])){ 
    //second ajax routine (ajax2.php) 
}

來源

2017-06-02 14:52:58 calexandre

在ajax回調中使用ajax回調代替php的div內容？

回答

相關問題