Question

以下代码可在index.php中找到。单击时，$ selection变量通过ajax传递给ajax.php，后者处理数据并用html替换#div1。

<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 [＆＃39; selection＆＃39;]处理$ selection。但是，在ajax.php结束时，另一个ajax调用ajax2.php，传递$ selection2：

<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。我的猜测是＆＃34; $（＆＃34;＃div2＆＃34;）。html（数据）;＆＃34; line不起作用，因为它位于ajax.php文件中，而不是index.php，其中#div2实际存在。

Answer 1

您遇到绑定/例行冲突，尝试将这些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>

欧塞德回调：

<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)
}

在ajax回调中使用ajax回调替换php的div内容？

1 个答案: