AJAX - 데이터베이스에서 정보 가져 오기

Question

이 링크 기준 http://www.w3schools.com/php/php_ajax_database.asp
변경 이벤트를 사용하여 콤보 상자를 사용하여 데이터베이스에서 데이터를 가져올 수 있습니다.
이제 제출 버튼을 누른 후 데이터를로드하는 중입니다. 내가 변경 이벤트를 사용하여 데이터를 가져올 때

이 내 코드입니다,이

$("#cal_country").change(function(){ 
     var str = document.getElementById("cal_country").value; 
     var str1 = document.getElementById("country_year").value; 
     var str2 = document.getElementById("country_month").value; 



     var foo = $("#cal_country").val(); 
     if(foo) 
     { 
     $("#sortHolidayWrapper").css({"visibility":"visible"}); 

     } 

     if (str=="") 
     { 
      document.getElementById("holiday_display").innerHTML=""; 
      return; 
      } 
     if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.onreadystatechange=function() 
     { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       document.getElementById("holiday_display").innerHTML=xmlhttp.responseText; 
      } 
     } 
     var url = holiday_preview_vars.plugin_url + "?id="+str+"&cy="+str1+"&cm="+str2; 
     xmlhttp.open("GET",url,true); 
     xmlhttp.send(); 


     }); 

내가

$("#cal_country").change(function(){ 

$("#submit").submit(function(){ 

그러나 그 변경하려고 노력하고 있습니다 작동 안함,. 이것에 대한 어떤 생각?

편집

$('#submitHoliday').submit(function(){ 
    $.get('holiday_preview_vars.plugin_url',$('#submitHoliday').serialize(),function(response){ 
     console.log(response); 
     var str = document.getElementById("cal_country").value; 
    var str1 = document.getElementById("country_year").value; 
    var str2 = document.getElementById("country_month").value; 


    if (str=="") 
    { 
     document.getElementById("holiday_display").innerHTML=""; 
     return; 
     } 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("holiday_display").innerHTML=xmlhttp.responseText; 
     } 
    } 


    var url = holiday_preview_vars.plugin_url + "?id="+str+"&cy="+str1+"&cm="+str2; 
    xmlhttp.open("GET",url,true); 
    xmlhttp.send(); 
    $("#holiday_display").html(response); 

    }); 
    return false; 
}); 

Answer 1

$('#formId').submit()이 트릭을 수행하지만 폼이 제출하여 아약스로 데이터를 보내지 못하게하려면 return false도 있어야합니다. Btw은

$('#formId').submit(function(){ 
    $.get('holiday_preview_vars.plugin_url',$('#formId').serialize(), 
     function(response){ 
     console.log(response); 
     //your code to process response 
     $("#holiday_display").html(response); 
    }); 
    return false; 
}); 

, $.get는 $.ajax get 메소드에 대한 jQuery의 짧은 손입니다. 대부분의 코드를이 스 니펫으로 대체 할 수 있습니다.

Answer 2

당신이 AJAX 호출이 수행 할 수 있도록 양식의 기본 동작 방지해야합니다 : 양식을 가지고 아마, 또한 좋은 생각을

$("#submit").submit(function(event){ 
    event.preventDefault(); 
    // the rest 

을하지 ID는 submit입니다.