Javascript AJAX-从数据库获取信息

基于此链接
这可以通过使用更改事件，使用组合框获取数据库上的数据
现在我要做的是在按下submit按钮后加载数据

这是我的代码，当我使用change event获取数据时，它正在工作

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

到

但它不起作用，。对这个有什么想法吗

编辑

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

---

确保阻止表单的默认操作以允许AJAX调用继续：

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

另外，使用ID

submit

$（“#formId'）的表单可能不是一个好主意。submit（）

可以解决这个问题，但是您还必须

返回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方法的简写。您可以用这个代码片段替换大部分代码

我假设

#submit

是一个submit按钮。如果是，则应为

$（“#提交”）。单击（函数（e）{

，但确保阻止默认操作->

e.preventDefault（）

在函数内部我不认为表单的id是submit，他只是假设submit按钮有一个submit eventuhm.“submit”按钮存储数据，我还想将其作为一个事件来显示表单，就像change事件一样。我尝试了这个，但它不显示数据。编辑后，现在应该将结果显示为p呃，你的代码，一定要用你的表单id替换

formId

。我不确定我做得是否正确。你能检查我的代码吗。谢谢你正确使用了formId吗？不是提交按钮id吗？是的，它是包含提交事件的表单，你可以附加到该表单

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