如何触发滑块调整事件并避免页面无限重载？

我用一个滑块来修改workload1和workload2输入框的值，调整滑块后需要提交test-form1表单（无提交按钮，所有筛选依赖事件监听触发）。表单提交后页面会重载，为了让滑块保持用户手动调整的位置，我把workload_min和workload_max传回模板myfile.html。当前遇到的问题：如何在滑块手柄移动时触发事件监听器？尝试dispatchEvent(event)会导致页面无限重载；使用addEventListener('input', function())无法检测到滑块修改输入框的变化。

相关代码 #

HTML #

<input form="test-form1" type="text" name="workload1" id="workload1" readonly="readonly">
<input form="test-form1" type="text" name="workload2" id="workload2" readonly="readonly">
<div id="slider-range"></div>

JavaScript #

$( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 20,
      step:20,
      max: 100,
      values: {% if workload_min %}
                  [{{ workload_min}}, {{workload_max }}]
              {% else %}
                  [ 20, 100 ]
              {% endif %},
      slide: function( event, ui ) {
        $( "#workload1" ).val(ui.values[ 0 ]+"%");
        $( "#workload2" ).val(ui.values[ 1 ]+"%");
      }
    });
    
    $( "#workload1" ).val( $( "#slider-range" ).slider( "values", 0 ) + "%");
    $( "#workload2" ).val( $( "#slider-range" ).slider( "values", 1 ) + "%");
});


var workload1 = document.getElementById('workload1')

var event = new Event('input')

workload1.addEventListener('input', function() {
    form.submit()
})

workload1.dispatchEvent(event)

Django 视图（view.py） #

def djangoFunction(request):
    workload_min = request.POST.get('workload1')
    workload_max = request.POST.get('workload2')

    # do some filtering and preprocessing
    context = {'workload_min: workload_min',
               'workload_max: workload_max'}
    return render(request, 'myfile.html', context)

核心问题拆解 #

1. 页面加载时调用dispatchEvent会直接触发表单提交，导致页面无限循环重载。
2. jQuery滑块修改输入框值属于DOM操作，不会自动触发原生input事件，因此监听input事件无效。

修复方案 #

1. 移除自动触发的dispatchEvent

删掉页面加载时主动触发input事件的代码，避免初始提交导致的无限重载。

2. 直接在滑块回调中提交表单

不需要通过输入框的事件监听中转，直接在滑块的stop（拖动结束）或slide（拖动过程）回调里提交表单，推荐用stop减少不必要的请求：

修改后的JavaScript代码：

$( function() {
    // 获取表单元素
    const testForm = document.getElementById('test-form1');
    
    $( "#slider-range" ).slider({
      range: true,
      min: 20,
      step:20,
      max: 100,
      // 注意：传回的workload_min带%，需要去掉转成数字
      values: {% if workload_min %}
                  [{{ workload_min|slice:":-1" }}, {{ workload_max|slice:":-1" }}]
              {% else %}
                  [ 20, 100 ]
              {% endif %},
      // 拖动结束后更新输入框并提交表单
      stop: function( event, ui ) {
        $( "#workload1" ).val(ui.values[ 0 ]+"%");
        $( "#workload2" ).val(ui.values[ 1 ]+"%");
        testForm.submit();
      }
    });
    
    $( "#workload1" ).val( $( "#slider-range" ).slider( "values", 0 ) + "%");
    $( "#workload2" ).val( $( "#slider-range" ).slider( "values", 1 ) + "%");
});

3. 修正Django视图的上下文格式

原代码中上下文是字符串格式，模板无法正确解析，改成键值对：

修改后的view.py代码：

def djangoFunction(request):
    workload_min = request.POST.get('workload1')
    workload_max = request.POST.get('workload2')

    # do some filtering and preprocessing
    context = {
        'workload_min': workload_min,
        'workload_max': workload_max
    }
    return render(request, 'myfile.html', context)

额外优化建议 #

• 若不想页面重载，可改用AJAX提交表单，实现局部页面更新，提升用户体验。
• 添加表单防重复提交逻辑，避免短时间内多次触发请求。

内容的提问来源于stack exchange，提问作者GCMeccariello