使用jQuery的AJAX请求未发布表单数据

Question

I'm trying to create a search form that posts the results queried from a MySQL database and I'm having trouble. The query is running correctly but the information entered in my form field is not 'posting' into the php document and actually getting through

    <form name="IDsearchform" action="">
    <input class='required digits' type="text" value="" maxlength='8' minlength='8' name="term" id="search" />
    </form>


$(document).ready(function(){
    //show loading bar
    function showLoader(){
        $('.search-background').fadeIn(200);
    }
    //hide loading bar
    function hideLoader(){
        $('#sub_cont').fadeIn(1500);
        $('.search-background').fadeOut(200);
    };
    $('#search').keyup(function(e) {
      if(e.keyCode == 13) {
        showLoader();
        $('#sub_cont').fadeIn(1500);
        $("#content #sub_cont").load("<?php bloginfo('template_directory'); ?>/searchID.php", hideLoader());
      }
      });     
    $(".searchBtn").click(function(){   
        //show the loading bar
        showLoader();
        $('#sub_cont').fadeIn(1500);         
        $("#content #sub_cont").load("<?php bloginfo('template_directory'); ?>/searchID.php", hideLoader());
    });
});

Answer 1

What you need to do is fist serialize the form data and then send it across. Otherwise jquery does not send the form data. This is what you need to do -

$("#content #sub_cont").load("<?php bloginfo('template_directory'); ?>/searchID.php",$("#IDsearchform").serialize(), hideLoader());

This way your form post data is automatically send my jQuery.

Answer 2

You should include the extra parameter in your call to $.load():

$("#content #sub_cont").load("<?php bloginfo('template_directory'); ?>/searchID.php",
 {term:$(#search.value)}, hideLoader());

It's important to include the data, first of all. ;-) Second, you want to make sure that the data is an object so that jquery will do a POST instead of a GET.

Source