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 - 從數據庫

回答

相關問題