如何使用jQuery防止在ajax中的異步

Question

我無法用單詞解釋我的問題，我會發布我的代碼。然後，嘗試在那裏解釋它。

$('#all').on('change', function(){ //ONCHANGE RADIOBUTTON, THERE ARE #bdo, #cash also. 

$.ajax({ 
    type:"GET", 
    url: "phpfunction.php?getFromTo=all", 
    dataType:"json", 
    success: function(data){ 
     $('#slctfrom').find('option').remove().end(); 
     $('#slctto').find('option').remove().end(); 
     $('#slctyr').find('option').remove().end(); 
     $.each(data, function(index, item) { 
      if (item.dt != "") { 
       $('#slctfrom').append('<option value='+item.dt+'>'+item.dt+'</option>'); 
       $('#slctto').append('<option value='+item.dt+'>'+item.dt+'</option>'); 
       $('#slctyr').append('<option value='+item.dt+'>'+item.dt+'</option>'); 
      } 
     }); 
    } 
}); 

var fyy = document.getElementById("slctfrom").value; 
var tyy = document.getElementById("slctto").value; 
var yr = document.getElementById("slctyr").value; 
var type = document.getElementById("slcttype").value; 
var graph; 
if (document.getElementById("column").checked) { 
    graph = "column"; 
} else if (document.getElementById("line").checked) { 
    graph = "line"; 
} else if (document.getElementById("area").checked) { 
    graph = "area"; 
} else { 
    graph = "pie"; 
} 
if (tyy < fyy) { 
    document.getElementById("errormsg").innerHTML = "Error: The 'To' value must be greater than or equal the 'From' value."; 
} else { 
    chart("all", graph, fyy, tyy, yr, type); //FUNCTION CHART. 
} 
}); 

我要執行我的AJAX第一，然後將它，因爲有時我的選擇得到執行零電平變化我，然後如果我試圖改變其中#bdo不包括在我的代碼，因爲它是在單選框檢查同#ALL，它會永遠清零，它沒有得到新的價值

Answer 1

把你的代碼的成功/錯誤回調。

$('#all').on('change', function() { //ONCHANGE RADIOBUTTON, THERE ARE #bdo, #cash also. 

    $.ajax({ 
     type: "GET", 
     url: "phpfunction.php?getFromTo=all", 
     dataType: "json", 
     success: function(data) { 

      ajaxCallback(); 

      $('#slctfrom').find('option').remove().end(); 
      $('#slctto').find('option').remove().end(); 
      $('#slctyr').find('option').remove().end(); 
      $.each(data, function(index, item) { 
       if (item.dt != "") { 
        $('#slctfrom').append('<option value=' + item.dt + '>' + item.dt + '</option>'); 
        $('#slctto').append('<option value=' + item.dt + '>' + item.dt + '</option>'); 
        $('#slctyr').append('<option value=' + item.dt + '>' + item.dt + '</option>'); 
       } 
      }); 
     }, 
     error: function() { 
      ajaxCallback(); 
     } 
    }); 


    function ajaxCallback() { 
     var fyy = document.getElementById("slctfrom").value; 
     var tyy = document.getElementById("slctto").value; 
     var yr = document.getElementById("slctyr").value; 
     var type = document.getElementById("slcttype").value; 
     var graph; 
     if (document.getElementById("column").checked) { 
      graph = "column"; 
     } else if (document.getElementById("line").checked) { 
      graph = "line"; 
     } else if (document.getElementById("area").checked) { 
      graph = "area"; 
     } else { 
      graph = "pie"; 
     } 
     if (tyy < fyy) { 
      document.getElementById("errormsg").innerHTML = "Error: The 'To' value must be greater than or equal the 'From' value."; 
     } else { 
      chart("all", graph, fyy, tyy, yr, type); //FUNCTION CHART. 
     } 
    } 
}); 

Answer 2

使用異步：假作爲阿賈克斯的選項調用

Answer 3

我想你可以把ajax調用到jQuery的ready事件。因爲url總是一樣的。並簡要使用$.getJSON。

如果ajax調用很長，則可以添加加載掩碼以防止使用觸發更改事件。

$(function(){ 
    $.getJSON('phpfunction.php?getFromTo=all', function(data){ 
     $('#slctfrom, #slctto, #slctyr').empty(); 
     if(!data){ 
      return; 
     } 

     $.each(data, function(index, item){ 
      if (item.dt != "") { 
       $('#slctfrom, #slctto, #slctyr').append('<option value='+item.dt+'>'+item.dt+'</option>'); 
      }  
     }); 
    }); 
}); 

$('#all').on('change', function(){ //ONCHANGE RADIOBUTTON, THERE ARE #bdo, #cash also. 

    var fyy = $("#slctfrom").val(); //may be this is better 
    var tyy = document.getElementById("slctto").value; 
    var yr = document.getElementById("slctyr").value; 
    var type = document.getElementById("slcttype").value; 
    var graph; 
    if (document.getElementById("column").checked) { 
      graph = "column"; 
    } else if (document.getElementById("line").checked) { 
      graph = "line"; 
    } else if (document.getElementById("area").checked) { 
      graph = "area"; 
    } else { 
      graph = "pie"; 
    } 
    if (tyy < fyy) { 
      document.getElementById("errormsg").innerHTML = "Error: The 'To' value must be greater than or equal the 'From' value."; 
    } else { 
      chart("all", graph, fyy, tyy, yr, type); //FUNCTION CHART. 
    } 
});