Question

这是我的代码，

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);
  }
});

而且在这里，我不知道如何获得价格滑块的起点和价值。

有人帮助我......

此致 Suganya

Answer 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);
  }
});

Answer 2

<强> SCRIPT

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

Answer 3

您可以在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")

Answer 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

我应该如何使用ajax将price滑块的值传递给控制器

4 个答案: