중첩 된 Jquery 호출에 제안이 필요합니다.

Question

하나씩 실행해야하는 두 개의 유효성 검사 jQuery 함수가 있습니다. 첫 번째 유효성 검사가 통과되면 두 번째 기능 만 호출해야합니다. 내 경우 엔 두 사람이 모두 동시에 사격하고 있습니다. 코드는 다음과 같습니다

$("#btnValidate").live('click', function (event) { 
    $.ajax({ 
     data: { 
      procCode: '001' 
     }, 
     url: "jsp/Process.jsp", 
     success: function (result) { 
      $("#tdValidYN").html(result); 
      if (document.getElementById('hidValidYN').value == 'N') { 
       alert("Validation Failed. Required Columns Missing"); 
       $('#btnSave').attr('disabled', true); 
      } else { 
       alert("Validation Passed"); 
       $('#btnSave').attr('disabled', false); 
      } 
     } 
    }); 
    $.ajax({ 
     data: { 
      procCode: '002' 
     }, 
     url: "jsp/Process.jsp", 
     success: function (result) { 
      $("#tdValidYN").html(result); 
      if (document.getElementById('hidValidYN').value == 'N') { 
       alert("Validation Failed. Invalid Parameters Used"); 
       $('#btnCreateTable').attr('disabled', true); 
      } else { 
       alert("Validation Passed"); 
       $('#btnCreateTable').attr('disabled', false); 
      } 
     } 
    }); 
}); 

첫 번째 기능의 if 조건에 두 번째 기능을 넣으려고했지만 스크립트 오류가 발생했습니다.

도와주세요. 이 같은

Answer 1

뭔가가 작동 할 수 있습니다 : 당신이 뭘하려 이잖아 경우

$("#btnValidate").live('click', function(event) { 
    $.ajax({ 


     data: {procCode: '001'}, 
           url:"jsp/Process.jsp", 
           success:function(result){ 
           $("#tdValidYN").html(result); 
           if(document.getElementById('hidValidYN').value=='N'){ 
            alert("Validation Failed. Required Columns Missing"); 
            $('#btnSave').attr('disabled', true); 
           }else{ 
            alert("Validation Passed"); 
            $('#btnSave').attr('disabled', false); 

              $.ajax({ 
                data: {procCode: '002' }, 
                url:"jsp/Process.jsp", 
                success:function(result){ 

                 $("#tdValidYN").html(result); 
                 if(document.getElementById('hidValidYN').value=='N'){ 
                  alert("Validation Failed. Invalid Parameters Used"); 
                  $('#btnCreateTable').attr('disabled', true); 
                 }else{ 
                  alert("Validation Passed"); 
                  $('#btnCreateTable').attr('disabled', false); 
                 } 
                } 
              }); 
           } 

           } 
         }); 


} 

, 무슨 오류가 얻는?

Answer 2

두 번째 jQuery $.ajax 호출을 success: function(){ } 매개 변수 안에 삽입하십시오. 첫 번째 $.ajax 호출이 성공적으로 실행 된 후에 실행됩니다.

Answer 3

작성한 코드는 자바 스크립트가 순차적으로 실행된다는 간단한 이유 때문에 분명히 작동하지 않습니다. 첫 번째 호출의 두 번째 호출을 success 콜백 내부에서 수행하십시오. 또는 두 번째 호출을 명명 된 함수 안에 넣고 첫 번째 함수의 success 콜백 내부에서 호출하여 코드를 더 깔끔하게 보이게 할 수 있습니다.

Answer 4

제대로 이해했다면, 첫 번째 아약스 요청이 성공적 일 때만 두 번째 ajax 요청을 보내려합니다. 콜백 스파게티 대신에 Deferred 오브젝트를 사용하는 것이 좋습니다.

http://api.jquery.com/category/deferred-object/

코드가 될 법한 :

$("#btnValidate").live('click', function (event) { 
    var d = $.Deferred(); 
    $.ajax({ 
     data: { 
      procCode: '001' 
     }, 
     url: "jsp/Process.jsp", 
     success: function (result) { 
      $("#tdValidYN").html(result); 
      if (document.getElementById('hidValidYN').value == 'N') { 
       alert("Validation Failed. Required Columns Missing"); 
       $('#btnSave').attr('disabled', true); 
       d.reject(); 
      } else { 
       alert("Validation Passed"); 
       $('#btnSave').attr('disabled', false); 
       d.resolve(); 
      } 
     } 
    }); 

    d.done(function(){ 
     $.ajax({ 
      data: { 
       procCode: '002' 
      }, 
      url: "jsp/Process.jsp", 
      success: function (result) { 
       $("#tdValidYN").html(result); 
       if (document.getElementById('hidValidYN').value == 'N') { 
        alert("Validation Failed. Invalid Parameters Used"); 
        $('#btnCreateTable').attr('disabled', true); 
       } else { 
        alert("Validation Passed"); 
        $('#btnCreateTable').attr('disabled', false); 
       } 
      } 
     }); 
    }); 
}); 

이 방법, 두 번째 아약스 요청 (콜백이 done 기능을 통과) 첫 번째 호출이 성공하면 (볼 실행이 실행 d.resolve()). 유효성 검사가 잘못되면 d.reject()이 호출되고 콜백이 실행되지 않습니다. 정확히 reject이라고 호출하면 fail에 전달 된 콜백이 실행되지만 아무 것도 추가되지 않았으므로 아무 것도 실행되지 않습니다.

편집 : 실제로, $.ajax 지연된 객체를 반환, 그래서 우리는 같은 것을 할 수있는 :

var d = $.ajax({ ... }); 
d.done(function(result) { 
    // this runs when the ajax call succeeds, it's the success callback 
}); 

을하지만 그것은 더 이상 리팩토링을 필요로한다.

이연 객체에 대한 참조 : 전에 같은 방법을 시도하고 객체와 같은 일부 스크립트 예외가 null 가지고 http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/