함수로 AJAX 호출을 일반화하기

Question

다음과 같이 함수로 AJAX 호출을 일반화하려고 시도하고 있습니다. 나는이 일을 전에하지 않았고 내가 제대로하고 있는지 확실하지 않습니다. 내가 여기서 할 노력하고있어 무엇

<script> 
    $(document).ready(function(){ 
    var reg_no=$("#reg_no").val(); 
    reg_no=reg_no.trim(); 
    if(reg_no!==""){ 
     //populate fields 
     data={reg_no:reg_no,func:"getSupplierDetails"}; 
     success_function="updateFormFields"; 
     ajax_call(data,success_function); 
    } 
}); 

function ajax_call(data,success_function){ 
    $.ajax({ 
     type:"POST", 
     url:"../control/supplier-c.php", 
     dataType:"json", 
     data:data, 
     success:function(data){ 
      success_function(data); //variable function works?? 
     } 

    }); 
} 

function updateFormFields(data){ 
    //some code here to handle data array 
} 
</script> 

는 데이터 배열과 성공에 실행되는 기능을 전달하여 전체 Ajax 코드를 재 작성하지 않도록합니다. 내가 뭘했는지 확실하지 않은 것은 가변 함수의 사용이다.

updateFormFields() 코드가 ajax 호출에서 success 핸들러로 이동되고 ajax_call()이 별도의 함수로 정의되지 않았지만 바로 다음에 구현되면 ajax 호출에 대해 모든 작업이 수행된다는 점에주의해야합니다 주석은 "필드 채우기"입니다. 나는 이런 식으로 시도한 경험이 없으며 이것이 가능한지 아닌지를 알아야합니다.

당신은 성공의 기능을 포장 할 필요가 없습니다

Answer 1

Javascript에서 함수는 1 차 클래스 객체이므로 매개 변수로 전달할 수 있습니다.

ajax_call(data, updateFormFields); 

및 예상대로 작동합니다 :

function json_post(url, data, success_function, error_function) { 
    $.ajax({ 
     type:"POST", 
     url:url, 
     dataType:"json", 
     data:data 
    }).then(success_function, error_function); 
} 

그런 다음 귀하의 경우에는

json_post("../control/supplier-c.php", { data: "data" }, function (res) { 
    console.log('Ajax req successful'); 
    console.log(res); 
}, function (res) { 
    console.log('Error in ajax req'); 
    console.log(res); 
}); 

로 호출 할 수 있습니다, 당신은 할 수 있습니다.

Answer 2

, 당신은 단지 직접 적용 적용 할 수 있습니다 감사합니다.

function ajax_call(data, success_function) { 
    $.ajax({ 
     ... 
     success: success_function 
    }); 
} 

더 좋은 아이디어는 기존에게 success 및 error 콜백을 피하고 대신에 jQuery를 약속을 반환하는 것입니다. 표준 약속 방법 .then()과`를 사용할 수 있습니다.

function ajax_call(data) { 
    return $.ajax({ 
     ... 
    }); 
} 

ajax_call() 
    .then(function(data) { 
     // this runs if it succeeds 
    }) 
    .fail(function(err) { 
     // this runs if it failed 
    }); 

약속은 체인 수있는 코드 아첨을, "크리스마스 트리 콜백"의 둥지를 방지에 큰 효과가있다.

Answer 3

서버 응답 (XHR) 오류도 처리하려면 success_function 및 failure_function을 확인하는 것이 좋습니다.

function success_function(){ 
 
    //code to handle success callback 
 
} 
 

 
function error_function(){ 
 
    //code to handle failure callback 
 
} 
 

 
function ajax_call(data, success_function, error_function) { 
 

 
    if (typeof success_function === 'function' && typeof error_function === 'function') { 
 
    $.ajax({ 
 
     type: "POST", 
 
     url: "../control/supplier-c.php", 
 
     dataType: "json", 
 
     data: data, 
 
    }).then(success_function).fail(error_function); 
 
    } 
 
}