如何在jquery ajax中发送所有搜索过滤器值并获得结果?

时间:2015-12-11 10:58:29

标签: javascript php jquery mysql ajax

我有像checkbox,radibutton这样的搜索过滤器选项如何获取复选框选中值的值并获取所选单选按钮并将值发送到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')."')";
    }

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

我通过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
          });


    }

    })


})