변수가 작동하도록 중첩 된 Ajax 호출을 재구성

Question

아래의 "값"변수는 두 번째 호출로 상속되지 않습니다. 이것을 재구성하여 작동하도록 권장되는 방법은 무엇입니까?

먼저 데이터 표의 모든 데이터를 가져옵니다. 그런 다음 완전히 다른 데이터베이스 (변경 제어)에서 보류중인 변경 사항을 가져와야합니다. 두 번째 데이터가 있으면 표시해야합니다.

function getData(appid) { 
    $.ajax({ 
    url: 'services/getData', 
    type: 'GET', 
    data: { 'appid': appid }, 
    dataType: 'json', 
    success: function (data) { 
     var field1Value = data.field1; 
     var field2Value = data.field2; 
     var field3Value = data.field3; 

     //get pending changes 
     $.ajax({ 
      url: 'services/getPendingChanges', 
      type: 'GET', 
      data: { 'appid': appid }, 
      dataType: 'json', 
      success: function (data2) { 
       if (data2.field1 <> '') { field1value = data2.field1 }; 
       if (data2.field2 <> '') { field1value = data2.field2 }; 
       if (data2.field2 <> '') { field1value = data2.field2 }; 
      }, 
      complete: function() { 
       //set data in UI regardless of whether it came from getData or getPendingChanges 
       $('#txtField1').html(field1value); 
       $('#txtField2').html(field2value); 
       $('#txtField3').html(field3value); 
      } 
     }) 
    } 
    }) 
} 

물론 이렇게하면 "* value"변수가 모두 정의되지 않습니다.

Answer 1

이것이 당신을 전혀 도울 지 (그리고 아마도 그렇지는 않을지) 확실하지 않지만, 이것은 내가 자바에서 배운 시간이다. 하지만 javascript에있는 anon 클래스의 본질은 변수 충돌에 대한 걱정없이 사용할 수 있습니다. 가장 쉬운 방법은 나중에 사용할 상위 범위 변수까지 퍼널하는 것입니다. 그러나 그것은 일반적으로 나쁜 습관입니다 ... 그래서 당신은 모든 것을 감싸는 래퍼를 던질 수 있습니다 ...

Answer 2

나는 두 번째 아약스를 호출 한 다음 첫 번째 것을 완성하여 필드를 숨 겼습니다. 나는 첫 번째 호출의 성공과 두 번째 호출의 성공에서 필드를 설정합니다. 이 존재하면입니다. 그런 다음 나는 두 번째를 완성하면서 그것들을 숨긴다.

function getData(appid) { 
    $('#txtField1').hide(); 
    $('#txtField2').hide(); 
    $('#txtField3').hide(); 
    $.ajax({ 
    url: 'services/getData', 
    type: 'GET', 
    data: { 'appid': appid }, 
    dataType: 'json', 
    success: function (data) { 
     var field1Value = data.field1; 
     var field2Value = data.field2; 
     var field3Value = data.field3; 
     $('#txtField1').html(field1value); 
     $('#txtField2').html(field2value); 
     $('#txtField3').html(field3value); 
    }, 
    complete: function() { 
     //get pending changes 
     $.ajax({ 
      url: 'services/getPendingChanges', 
      type: 'GET', 
      data: { 'appid': appid }, 
      dataType: 'json', 
      success: function (data2) { 
       if (data2.field1 <> '') { 
        field1value = data2.field1 
        $('#txtField1').html(field1value); 
       }; 
       if (data2.field2 <> '') { 
        field2value = data2.field2 
        $('#txtField2').html(field2value); 
       }; 
       if (data2.field3 <> '') { 
        field3value = data2.field3 
        $('#txtField3').html(field3value); 
       }; 
      }, 
      complete: function() { 
       $('#txtField1').show(); 
       $('#txtField2').show(); 
       $('#txtField3').show(); 
      } 
     }) 
    } 
    }) 
} 

궁극적으로 표시기를 숨기는 대신로드 표시기로 교체합니다. 또한 백그라운드에서 모든 로직을 수행하고 방금 적절한 데이터를 반환하는 단일 웹 서비스를 사용하는 것이 가장 좋습니다.