Jquery - 2 Ajax請求不工作在同一頁

Question

所以我有這個問題的一天，我無法發送來自同一頁的2個Ajax請求。 我讀過的大部分文檔是關於在同一頁面上運行jquery的2個版本，與沒有衝突的方法 但我試圖發送2個Ajax請求，使用相同版本的Jquery。

繼承人我的代碼

<script> 
$(document).ready(function(){ 
    var username = $("title").html(); 
    $.post("functions/userdetails.php", {username: username}, 
    function(result){ 
     if(result == 'nf'){ 
      alert("The Account Doesnt Exist"); 
     } 
     else{ 
      var obj = JSON.parse(result); 
      $.each(obj, function(key, val) {   // iterate over results 
      $("#name").html(val.fname+" "+val.lname); 
      $("#bio").html(val.bio); 
      $("#username").html("@"+val.username); 
      $("#tid").html(val.id); 
     })   
    } 
    } 
); 
}); 
$(document).ready(function(){ 
    var tid = $("tid").html(); 
    var myid = $("myid").html(); 
    $.post("functions/checkrelations.php", {tid: tid, myid:myid}, 
    function(result){ 
     if(result == 'nf'){ 
      $("#sendr").show(); 
      $("#cancel").hide(); 
     } 
     else{ 
      $("#cancel").show(); 
      $("#sendr").hide(); 
     })   
    } 
    } 
); 
}); 
</script> 

它工作得很好，如果我只有一個要求，但是當我把這些結合在一起，他們沒有工作。

Answer 1

這裏是你的代碼的編輯版本，這可能會幫助你

$(document).ready(function(){ 
     var username = $("title").html(); 
     $.post("functions/userdetails.php", {username: username}, 
     function(result){ 
      if(result == 'nf'){ 
       alert("The Account Doesnt Exist"); 
      } 
      else{ 
        var obj = JSON.parse(result); 
        $.each(obj, function(key, val) {   // iterate over results 
        $("#name").html(val.fname+" "+val.lname); 
        $("#bio").html(val.bio); 
        $("#username").html("@"+val.username); 
        $("#tid").html(val.id); 
       }); 

       //here is the first ajax calls completes succesfully and your 
       //new html is build so second ajax must be called from here 

        var tid = $("#tid").html(); 
        var myid = $("#myid").html(); 
        $.post("functions/checkrelations.php", {tid: tid, myid:myid}, 
        function(result){ 
          if(result == 'nf'){ 
           $("#sendr").show(); 
           $("#cancel").hide(); 
          } 
          else{ 
           $("#cancel").show(); 
           $("#sendr").hide(); 
          }  
         }    
       ); 
      } 
     } 
    ); 
}); 

Answer 2

由於Ananthakrishnan吧唧的評論說，看來你的第二個功能，取決於你的第一個功能。

第二個函數還有一些其他問題。 ID缺少jQuery選擇器中的哈希標記。該函數的右括號似乎在else語句中被捕獲。

我不推薦嵌套函數，而是深入到代碼的嵌套塊中，我建議使用Promises來保持代碼深度低並處理錯誤。就像這樣：

$(document).ready(function(){ 
    var username = $("title").html(); 
    // Make your first request 
    $.post("functions/userdetails.php", {username: username}) 
    // Handle the first response 
    .then(function(result) { 
     if (result === 'nf') { 
      // Use promise chain rejection to handle errors. 
      return $.Deferred().reject("The Account Doesn't Exist"); 
     } else { 
      var obj = JSON.parse(result); 
      // Are there actually multiple, here? 
      // This will overwrite on each loop. 
      $.each(obj, function(key, val) {   
       $("#name").html(val.fname + " " + val.lname); 
       $("#bio").html(val.bio); 
       $("#username").html("@" + val.username); 
       $("#tid").html(val.id); 
      }); 
     } 
    }) 
    // Make the next request. 
    .then(function() { 
     var tid = $("#tid").html(); 
     var myid = $("#myid").html(); 
     return $.post("functions/checkrelations.php", {tid: tid, myid:myid}); 
    }) 
    // Update the appearance 
    .then(function(result) { 
     if (result === 'nf') { 
      $("#sendr").show(); 
      $("#cancel").hide(); 
     } else { 
      $("#cancel").show(); 
      $("#sendr").hide(); 
     } 
    }) 
    // This is the "catch" logic. 
    .then(null, function(errorMessage) { 
     if (typeof errorMessage === 'string') { 
      alert(errorMessage); 
     } else { 
      // If the requests error, or the JSON.parse throws, we end up here. 
      alert('Something went wrong!'); 
     } 
    } 
});