如何在jQuery Ajax中发送所有搜索过滤器值并获得结果？

Question

我有搜索过滤器选项，如复选框，单选按钮，如何获取复选框选中值的值并获取选定的单选按钮，然后将该值发送至mysql搜索查询以获取结果。 请检查以下代码

注意：现在，我将分别发送值复选框和单选按钮值，这在用户过滤后不会给出确切的结果。

<li><label class="add"><input type="checkbox" class="location_check" name="iCheck[]" value="East Valley">East Valley</label>
 </li>
        <li><label class="add"><input type="checkbox" class="location_check" name="iCheck[]" value="Central/South Valley">Central/South Valley</label>
 </li>

  \\radio button

 <li><label class="add"><input type="radio" class="budget_filter" name="iCheck" value="open">
             OPEN</label></li>
                             <li><label class="add"><input type="radio" class="budget_filter" name="iCheck" value="500">
             LESS THAN $500</label></li>
                             <li><label class="add"><input type="radio" class="budget_filter" name="iCheck" value="1000">
             LESS THAN $1000</label></li>



$('.location_check').on('ifChecked', function(event){

 var values = new Array();
$("input.location_check[type=checkbox]:checked").each(function(){;

    values.push($(this).val());
})

var track_click = 0; //track user click on "load more" button, righ now it is 0 click

var total_pages = 4;
$.ajax({
    url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
      type: "POST",
    data:'location_checkboxes='+ values +'&page='+track_click,
    beforeSend: function(){
    $('#loader-icon').show();
    },
    complete: function(){
    $('#loader-icon').hide();
    },
    success: function (html) {
         $('#jobsfound').html(html);
    }

    })


  })

  $('.budget_filter').on('ifClicked', function(event){

var get_value= $(this).val();

var track_click = 0; //track user click on "load more" button, righ now it is 0 click

var total_pages = 4;
$.ajax({
    url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
      type: "POST",
    data:'search_data=' + get_value + '&page='+track_click,
    beforeSend: function(){
    $('#loader-icon').show();
    },
    complete: function(){
    $('#loader-icon').hide();
    },
    success: function (html) {
         $('#jobsfound').html(html);
    }

    })

})

在模型文件中

if($this->input->post('search_data')=="open"){
        $where = "and rs.budget >= 0";
    }else if($this->input->post('search_data')){
        $where = "and rs.budget < $this->input->post('search_data')";
    }else{
        $where = "";
    }
    echo $where;


    if($this->input->post('location_checkboxes')){
        $where = "and FIND_IN_SET(a.neighborhood_area, '".$this->input->post('location_checkboxes')."')";
    }

Answer 1

将整个发送数据转换为JSON格式，并将其发送到PHP代码。 您可以在哪里使用它以作进一步使用。

Answer 2

我解决了通过JavaScript中的单个功能调用使用

$('input').on('ifChecked', function(event){


var mapOptions = {
    center: new google.maps.LatLng(10.670044, -61.515305),
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions); 


 var values = new Array();
$("input.location_check[type=checkbox]:checked").each(function(){

    values.push($(this).val());
})
 var budget_value;
if($('input.budget_filter:checked').val()){
  budget_value = $('input.budget_filter:checked').val();
}else{
    budget_value = "";
}

var job_date;

if($('input.job_date:checked').val()){
  job_date = $('input.job_date:checked').val();
}else{
    job_date = "";
}





var track_click = 0; //track user click on "load more" button, righ now it is 0 click

var total_pages = 4;
$.ajax({
    url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
      type: "POST",
      dataType:"json",
    data:'location_checkboxes='+ values + '&budget_value=' + budget_value  + 
    '&job_dates=' + job_date  + '&page='+track_click,
    beforeSend: function(){
    $('#loader-icon').show();
    },
    complete: function(){
    $('#loader-icon').hide();
    },
    success: function (html) {
         $('#jobsfound').html(html);
         alert($("#test").text());
        //initialize();
         new google.maps.Marker({
                position: new google.maps.LatLng(33.493889, -111.922874),
                map: map,
                //icon: new google.maps.MarkerImage( src, new google.maps.Size(100, 106), new google.maps.Point(0, 0), new google.maps.Point(50, 50) ),
               // title: c.name
          });


    }

    })


})