Question

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

当我使用change事件获取数据时，这是我的代码，这是有效的，

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

Answer 1

$('#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方法的简写。您可以使用此代码段替换大部分代码

Answer 2

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

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

此外，拥有ID为submit的表单可能不太好。

AJAX - 从数据库中获取信息

2 个答案: