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条)

报告相同问题?

悬赏问题

  • ¥15 MddBootstrapInitialize2失败
  • ¥15 LCD Flicker
  • ¥15 Spring MVC项目,访问不到相应的控制器方法
  • ¥15 esp32在micropython环境下使用ssl/tls连接mqtt服务器出现以下报错Connected on 192.168.154.223发生意外错误: 5无法连接到 MQTT 代理,如何解决?
  • ¥15 关于#genesiscsheel#的问题,如何解决?
  • ¥15 Android aidl for hal
  • ¥15 STM32CubeIDE下载程序报错
  • ¥15 微信好友如何转变为会员系统?(相关搜索:小程序)
  • ¥15 c# 直接使用c++ 类库文件
  • ¥15 一个主机电脑有两个显示器,当前有两个软件主体是网页html打包的exe程序,如何通过cmd命令bat同时打开软件一个在主屏幕显示,另外一个软件在2副屏幕上显示