layui滑块范围值如何传给后端？

Question

项目前端有一个需求是用滑块选择范围值，点查看后出相关数据表，目前控制台能打印出滑块的开始和结尾值，但就是无法把范围值传给后端，前端不太熟悉，请高人指点一下。

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
   
     <a href="javascript:void(0);" id="ck"
    class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">查看</a>
   
  </div>
</script>

下面是滑块取值代码：

  //开启范围选择
             layui.slider.render({
                elem: '#slideTest1'
            // ,value: 400 //初始值       
                ,min:300
                ,max:700
                ,value: [400, 600] //初始值
                ,range: true //范围选择
                ,setTips: function(value){ //自定义提示文本
                return value + '分';
                }
                ,change: function(vals){
                    console.log(vals[0]) //得到开始值
                    console.log(vals[1]) //得到结尾值                
                    //$('#test-slider-tips2').html('开始值：'+ vals[0] + '、结尾值：'+ vals[1]);
                }
            });

Answer 1

TechWhizKid参考GPT回答：

• 要把滑块的范围值传给后端，先要定义一个变量，用来保存这个范围值，然后在你的查看按钮的点击事件中，用 AJAX 技术（或者其他方式，比如 Fetch API）来将这个值发送到服务器。

以下是一个例子：

// 在外面定义变量，用于保存滑块的范围值
let sliderValues = [400, 600];

// 开启范围选择
layui.slider.render({
    elem: '#slideTest1',
    min:300,
    max:700,
    value: sliderValues, // 初始值
    range: true, // 范围选择
    setTips: function(value) { // 自定义提示文本
        return value + '分';
    },
    change: function(vals) {
        console.log(vals[0]); // 得到开始值
        console.log(vals[1]); // 得到结尾值

        // 更新变量的值
        sliderValues = vals;
    }
});

// 定义查看按钮的点击事件
$('#ck').on('click', function() {
    // 使用 AJAX 技术将滑块的范围值发送到服务器
    $.ajax({
        type: "POST",
        url: "/path/to/your/api", // 这里替换为你的 API 地址
        data: { start: sliderValues[0], end: sliderValues[1] },
        success: function(response) {
            // 这里可以处理服务器返回的响应
            console.log(response);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // 这里可以处理 AJAX 请求失败的情况
            console.error(textStatus, errorThrown);
        }
    });
});

• 注意替换上面代码中的/path/to/your/api为你的实际API地址，同时也要根据后端API接口的要求，修改 AJAX 请求的类型（可能不是 "POST"），以及请求的数据格式。

• 另外，这个例子使用了 jQuery 中的 AJAX 函数和点击事件处理函数，如果你的项目没有使用 jQuery，可能要用其他方式来发送 AJAX 请求和处理点击事件。