dousonghs58612
2014-03-28 02:07
浏览 35

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

    点赞 评论
  • dsfsdf7852 2014-03-28 02:12

    Make sure you prevent the default action of the form to allow your AJAX call to proceed:

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

    Also, probably not a good idea to have a form with the ID submit.

    点赞 评论

相关推荐 更多相似问题