dousonghs58612 2014-03-28 02:07
浏览 41
已采纳

AJAX - 从数据库中获取信息

Based on this link http://www.w3schools.com/php/php_ajax_database.asp
This can fetch data on the database using combo box, by using change event.
Now what I'm trying to do is to load the data, after pressing the submit button.

This is my codes when I fetch the data using change event, This is working,

 $("#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(); 


      });

I tried to change the

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

to

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

But its not working,. any idea for this one?

EDIT

$('#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;
 });
  • 写回答

2条回答 默认 最新

  • douzhanjia0773 2014-03-28 02:13
    关注

    $('#formId').submit() will do the trick, but you also have to return false to prevent the form from submitting and send the data by ajax.

     $('#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;
     });
    

    Btw, $.get is jQuery's short hand for $.ajax get method. You can replace most of your code with this snippet

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?