jQuery에서 코드 중복 방지

Question

페이지에 두 개의 선택이 있습니다. 둘 중 하나가 변경되면 jQuery AJAX를 사용하여 PHP 스크립트에 값을 게시하고 결과를 반환 한 다음 페이지에 배치합니다.

나는 이것을 문서에서도 실행할 수 있기를 원하지만 가장 우아하거나 '적절한'방법은 모르겠다. 아마도 함수의 일부를 함수로 감싸고 문서 준비를 위해 호출 할 것입니다. 이럴 경우 어떻게해야합니까? 현재 코드는 복제됩니다 (아래 참조).

이

<script type="text/javascript"> 

$(document).ready(function(){ 

      $("#results").html('Searching...'); 

       var foo = $("#foo").val(); 
       var bar = $("#bar").val(); 

      $.ajax({ 
       type: "POST", 
       url: "ajax_script.php", 
       data: "foo=" + foo + "&bar=" + bar , 

       success: function(msg){ 

       if(msg == 'nil') 
        { 
        $('#results').html('No results'); 
        } 
        else 
        { 
         $('#results').html(msg); 
        } 

       } // complete AJAX success 

      }); // complete AJAX 


      $("#foo, #bar").change(function(){   
      $("#results").html('Searching...'); 

      var foo = $("#foo").val(); 
      var bar = $("#bar").val(); 

      $.ajax({ 
       type: "POST", 
       url: "ajax_script.php", 
       data: "foo=" + foo + "&bar=" + bar , 

       success: function(msg){ 

        if(msg == 'nil') 
        { 
        $('#results').html('No results'); 
        } 
        else 
        { 
        $('#results').html(msg); 
        } 

       } // complete AJAX success 

      }); // complete AJAX 
     }); 

    }); 
    </script> 

Answer 1

당신이 하나 개의 함수를 작성해야합니다

$(document).ready(function(){ 
     my_ajax();    //On DOM ready 
     $("#foo, #bar").on('change',function(){   
      my_ajax(); 
     }); 
}); 

Answer 2

처럼 dom ready 및 on change에 기능을

function my_ajax() { 
    $("#results").html('Searching...'); 

      var foo = $("#foo").val(); 
      var bar = $("#bar").val(); 

     $.ajax({ 
      type: "POST", 
      url: "ajax_script.php", 
      data: "foo=" + foo + "&bar=" + bar , 

      success: function(msg){ 

       if(msg == 'nil') { 
        $('#results').html('No results'); 
       } else { 
        $('#results').html(msg); 
       } 
      } // complete AJAX success 
     }); // complete AJAX 
} 

처럼 하나의 함수에서 그 전체 아약스를 넣고 전화 주셔서 감사 모든 코드를 해당 함수로 옮기고 그 함수를 호출하십시오. function onChange 이벤트입니다.

JS : 아래의 예를 참조

이

$(function(){ 
    myFunction(); 
    $("#foo, #bar").change(myFunction); 
}); 
function myFunction(){ 
    $("#results").html('Searching...'); 

      var foo = $("#foo").val(); 
      var bar = $("#bar").val(); 

     $.ajax({ 
      type: "POST", 
      url: "ajax_script.php", 
      data: "foo=" + foo + "&bar=" + bar , 

      success: function(msg){ 

      if(msg == 'nil') 
       { 
       $('#results').html('No results'); 
       } 
       else 
       { 
        $('#results').html(msg); 
       } 

      } // complete AJAX success 

     }); // complete AJAX 
} 

Answer 3

또한과 같이 trigger을 사용할 수

$("#foo, #bar").change(function() { 
     $("#results").html('Searching...'); 

     var foo = $("#foo").val(); 
     var bar = $("#bar").val(); 

     $.ajax({ 
      type: "POST", 
      url: "ajax_script.php", 
      data: "foo=" + foo + "&bar=" + bar , 

      success: function(msg) { 
       if(msg == 'nil') { 
        $('#results').html('No results'); 
       } else { 
        $('#results').html(msg); 
       } 
      } 
     }) 
    }).trigger('change'); 

(준비 문서에 넣을 경우) 준비 문서에 트리거 그 방법을 선택 사항이 변경 될 때도 계속 사용할 수 있습니다.