jquery - jQuery UI Slider 更改后更新页面内容

Question

我正在为一个 web 项目使用 jquery Ui 滑块，我有一个小问题，我必须在滑块的值更改后更新页面内容，我不熟悉 ajax，所以请给我一个例子，我想我必须向服务器发送一个带有新数据的发布请求

我的html代码

<div>
<p class='stops_air'>Price</p>  
<input type="text" id="price_option_right" style="border:0; color:#f6931f; font-weight:bold;" />
<div id="slider-range"></div><br />
<input type="button" value="More Filters" class="more_filters_right_option">
</div>

Answer 1

你可以这样做：

$('yoursliderselector').change(function(){
    $.ajax({
        type : 'post',
        url : 'yoururl',
        data : {yourdata},
        success : function(data){
            // process to update here
        }
    });
});

编辑 ：

对于任何类型的输入

$('input').change(function(){
    $.ajax({
        type : 'post',
        url : 'yoururl',
        data : $(this).val(),
        success : function(data){
            // process to update here
        }
    });
});

Answer 2

示例代码...

$("#elementid").slider({
    range: true,
    min: 0,
    max: 100,
    slide: function (event, ui) {
        // write your jQuery post code here
        $.post("url", function(data){
           // write your page update code here
        });
    }
});