无法同时使用Ajax和复选框来从搜索页面结果

Question

<form enctype="multipart/form-data"> 
    <table> 
    <tr> 
     <td> 
     <font style="font-size:20px">Snp Id:</font> 
     </td> 
     <td><input type="text" name="isnp_id" id="isnp_id" placeholder="Ex:SCcLG07_1001342" size=20 style="font-size:18px"></td> 
    </tr> 
    <tr> 
     <td> 
     <font style="font-size:20px">Gene Id:</font> 
     </td> 
     <td><input type="text" name="igene" id="igene" placeholder="Ex:C.cajan_17400" size=20 style="font-size:18px"></td> 
    </tr> 
    <tr> 
     <td> 
     <font style="font-size:20px">Chromosome:</font> 
     </td> 
     <td><input type="text" name="ichr" id="ichr" placeholder="Ex:CcLG07" size=20 style="font-size:18px"></td> 
     <td> position from </td> 
     <td><input type="text" name="posstart" id="posstart" placeholder="Ex: 1" size="20"> to <input type="text" name="posend" id="posend" placeholder="Ex:100" size="20"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <font style="font-size:20px">Genotype name:</font> 
     </td> 
     <td> <select style="font-size:18px" id="sg" name="sg"> 
    <option value="">Select</option> 
    <option value="icpl_131">icpl_131</option> 
    <option value="icpa_2039">icpa_2039 </option> 
    <option value="icpl_96061">icpl_96061 </option> 
    </select> </td> 
     <td> between </td> 
     <td> <select style="font-size:18px" id="sg2" name="sg2"> 
    <option >Select</option> 
    <option value="icpa_2039">icpa_2039 </option> 
    <option value="icpl_131">icpl_131</option> 
    <option value="icpl_96061">icpl_96061 </option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="cbc" id="cbc" value="cb_class" /> </td> 
     <td> 
     <font style="font-size:20px">Classification:</font> 
     </td> 
     <td><select style="font-size:18px" name="sclass" id="sclass"> 
    <option value="all" selected="selected">Select</option> 
    <option value="intergenic">Intergenic</option> 
    <option value="intronic">Intronic</option> 
    <option value="non_synonymous_coding">Non Synonymous Coding</option> 
    <option value="synonymous_coding">Synonymous Coding</option> 
    </select> </td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="cbv" id="cbv" value="cb_vtype" /></td> 
     <td> 
     <font style="font-size:20px">Varation Type:</font> 
     </td> 
     <td><select style="font-size:18px" name="svtype" id="svtype"> 
     <option value="all" selected="selected">Select</option> 
     <option value="snp">Snp</option> 
     <option value="insertion">Insertion</option> 
     <option value="deletion">Deletion</option> 
     </select> </td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="cbf" id="cbf" value="cb_fc" /></td> 
     <td> 
     <font style="font-size:20px">Functional Class:</font> 
     </td> 
     <td><select style="font-size:18px" name="sfclass" id="sfclass"> 
     <option value="all" selected="selected">Select</option> 
     <option value="missense">Missense</option> 
     <option value="nonsense">Nonsense</option> 
     <option value="silent">silent</option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td><input type="reset" name="reset" value="Reset" style="font-size:18px"> 
     <input type="button" name="submit" id="goto" value="Search" onclick="loadData('1')" style="font-size:18px"><span id="loadings"></span></td> 
    </tr> 
    </table> 
</form> 

现在jQuery的AJAX功能代码：

<script type="text/javascript"> 
    function loading_show() { 
    $('#loadings').html("<img src='js/loader2.gif'/>").fadeIn('fast'); 
    } 

    function loading_hide() { 
    $('#loadings').fadeOut('fast'); 
    } 

    function loadData(page) { 
    $('#tbl').hide(); 
    loading_show(); 
    $.ajax({ 
     type: "POST", 
     url: "newrs_old1.php", 
     data: "page=" + page + "&isnp_id=" + $('#isnp_id').val() + "&igene=" + $('#igene').val() + "&ichr=" + $('#ichr').val() + "&posstart=" + $('#posstart').val() + "&posend=" + $('#posend').val() + "&sg=" + $('#sg').val() + "&sg2=" + $('#sg2').val() + "&cbc=" + $('#cbc').val() + "&sclass=" + $('#sclass').val() + "&cbv=" + $('#cbv').val() + "&svtype=" + $('#svtype').val() + "&cbf=" + $('#cbf').val() + "&sfclass=" + $('#sfclass').val(), 
     success: function(msg) { 
     $("#container1").ajaxComplete(function(event, request, settings) { 
      loading_hide(); 
      $("#container1").html(msg); 
     }); 
     } 
    }); 
    } 
    $(document).ready(function() { 
    $(document).bind('keypress', function(e) { 
     if (e.keyCode == 13) { 
     $('#goto').trigger('click'); 
     } 
    }); 
    $(".reset").click(function() { 
     $(this).closest('form').find("input[type=text], textarea").val(""); 
    }); 
    //loadData(1); // For first time page load default results 
    $('#container1 .pagination li.active').live('click', function() { 
     var page = $(this).attr('p'); 
     loadData(page); 
    }); 
    $('#go_btn').live('click', function() { 
     var page = parseInt($('.goto').val()); 
     var no_of_pages = parseInt($('.total').attr('a')); 
     if (page != 0 && page <= no_of_pages) { 
     loadData(page); 
     } else { 
     alert('Enter a PAGE between 1 and ' + no_of_pages); 
     $('.goto').val("").focus(); 
     return false; 
     } 
    }); 
    }); 
</script> 

不使用jQuery和AJAX，搜索页面运作良好，当我开始使用jQuery和ajax使其分页，复选框创建问题在这里。 执行ajax之后，搜索页面中给出的输入不会被脚本执行，只有在选中时才会使用复选框值。 我只能获得仅基于复选框的搜索结果，其余搜索列不起作用。 如果我从ajax删除复选框，我可以得到剩余的搜索列结果。但我想这两个工作，因为我使用组合搜索。 Plz帮我解决了这个问题。我不知道如何实现的jQuery AJAX这个问题

Answer 1

尝试使用FORMDATA通过AJAX像

function SubmitForm() { 
     var data = $("#yourform").serialize(); 
     var url = "Your URL" 
     var form = $('#yourform')[0] 
     var formdata = false; 
     if (window.FormData) { 
      formdata = new FormData(form); 
     } 
     $.ajax({ 
      url: url, 
      type: 'POST', 
      dataType: 'json', 
      data: formdata ? formdata : data, 
      cache: false, 
      contentType: false, 
      enctype: 'multipart/form-data', 
      processData: false, 
      success: function (data) { 
//whatever 
} 

Answer 2

只需添加唯一的ID在你形成像下面

<form enctype="multipart/form-data" id="form1" > 

标签和获取使用表单id形式化数据并通过如下所示的ajax

data: $('#form1').serialize(); 

serialize将通过所有形式f在ajax中处理数据。 你可以使用$ _POST