AJAX - 从数据库

基于此链接 http://www.w3schools.com/php/php_ajax_database.asp
这可以通过使用组合框，通过更改事件获取数据库中的数据上获取的信息。
现在我想要做的是加载数据，按下提交按钮后。AJAX - 从数据库

这是我的代码，当我使用改变事件获取数据，这是工作，

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

来源

2014-03-28 user2901740

我假设'＃submit'是一个提交按钮。如果是这样，它应该是'$（“＃submit”）。在函数 – Sean

$('#formId').submit()会做的伎俩，但你也必须return false，以防止表单提交和发送数据的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; 
});

顺便说一句，$.get是jQuery的为$.ajax get方法手短。你可以用这个代码替换你的大部分代码

来源

2014-03-28 02:13:40 andrew

uhm ..提交按钮存储数据，我也想把它作为一个事件来显示表单，就像更改事件一样。这一个，但它不显示数据 – user2901740

编辑，它现在应该显示结果为您的代码，请务必用您的表格的id替换formId' – andrew

我不知道如果我这样做对，你能检查我的代码吗？谢谢 – user2901740

请务必防止表单，允许的默认操作你的AJAX调用进行：

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

而且，可能不是一个好主意，有一个表格与ID submit。

来源

2014-03-28 02:12:36

内单击（函数（e）{'，但确保阻止默认操作 - >'e.preventDefault（）;'我不认为表单确实有一个提交ID，他只是假设提交按钮有一个提交事件 – andrew

AJAX - 从数据库

回答

相关问题