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将传递ajax中的所有表单字段数据。您可以使用$ _POST

获取该数据

使用ajax with checkbox时无法从搜索页面获取结果

2 个答案: