我应该如何使用 ajax 将价格滑块的值传递给控制器答案

【问题标题】：How should I pass the value of price slider to the controller using ajax我应该如何使用 ajax 将价格滑块的值传递给控制器
【发布时间】：2016-06-21 23:02:58
【问题描述】：

这是我的代码，

var $range = $("#price-slider");
$range.ionRangeSlider({
    min: 130,
    max: 575,
    type: 'double',
    prefix: "$",
    prettify: false,
    hasGrid: true,
    onChange : function (data) {
        console.log(data);
    }
});

在这里，它想将值传递给控制器。我应该如何在onChange 函数中使用 Ajax

而我的 Ajax 是这样的

$.ajax({
  url: 'hotelresults',
  type: 'POST',
  data: {
    from: from_val,
    to: to_val
  },
  success: function(data) {
    $('.hotel_list').html(data);
  }
});

而且在这里，我不知道如何获取价格滑块的 from 和 to 值..

谁来帮帮我..

问候苏甘亚

【问题讨论】：

标签： javascript php jquery ajax laravel-5

【解决方案1】：

对于离子范围滑块，onChange 函数接受一个参数说数据，它保存滑块的范围值。

在您的情况下，您可以将 data.from 和 data.to 用于 ajax 函数内的范围值。

$.ajax({
  url: 'hotelresults',
  type: 'POST',
  data: {
    from: data.from,
    to: data.to
  },
  success: function(data) {
    $('.hotel_list').html(data);
  }
});

【讨论】：

【解决方案2】：

您可以在 onchange() 函数中使用 ajax 请求并将滑块响应传递给 ajax。

示例：

<script type="text/javascript">
var $range = $("#price-slider").val();
$range.ionRangeSlider({
  min: 130,
  max: 575,
  type: 'double',
  prefix: "$",
  prettify: false,
  hasGrid: true,
  onChange : function (data) {
      //console.log(data);
      $.ajax({
        url: 'hotelresults',
        type: 'POST',
        data: "slider_response="+data,
        success: function(response) {
          $('.hotel_list').html(response);
        }
      });
  }
});
</script>

要获取滑块的值，您需要使用 $("#price-slider").val() 而不是 $("#price-slider")

【讨论】：

【解决方案3】：

脚本

var $range = $("#price-slider");
$range.ionRangeSlider({
    min: 130,
    max: 575,
    type: 'double',
    prefix: "$",
    prettify: false,
    hasGrid: true,
    onChange : function (data) {
        console.log(data.from)
        console.log(data.to)
    }
});

您可以通过获取类似的值将值传递给 AJAX

data.to 和 data.from

DEMO

【讨论】：

【解决方案4】：

非常感谢..谁回复我了，

这样尝试过

onChange : function (data) {
        var from_num = data.fromNumber;
        var to_num =data.toNumber;
        $.ajax({
                // alert('hai');
                url: 'hotelresults',
                type: 'POST',
                data: { 
                        from: from_num,
                        to: to_num, 
                },
                success: function(data){
                        $('.hotel_list').html(data);
                }
            });
}

它对我有用:) :D

【讨论】：