将滑块值传递给瓶子路线功能

Question

我正在尝试运行一段代码，但有一部分不起作用，我需要从滑块传递值。我可以在 html 页面中看到该值，但我无法将其传递给 inputRange()，我需要在其中运行一些命令。

我试图只隔离与滑块一起工作的代码。您能告诉我如何将滑块值传递给 val_slide 吗？谢谢

代码：

from bottle import route, run, template

IP_ADDRESS = '192.168.0.80'
PORT = 8080

@route('/')
def hello():
    return '<b>Test</b>'

@route('/remote')
def remote():
    return '''<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
  $('#inputRange').on('change mouseup', function(){
    var val_slide ='inputRange';
    $.ajax({
      url:  '/remote/inputRange',
      type: 'GET',
      data: {command:val_slide},
    });
  });
});
</script>
<style></style>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form>
<div style="text-align:center">
<label for="switch">Test</label>
<div class="slidecontainer">
<input id="inputRange" type="range" min="0" max="100" step="1" value="20"  class="slider" name='data'>
<output name="inputRange"/output>
</div>
</form>
</div>
</div>
</body>
</html>'''

@route('/remote/inputRange')
def inputRange():
    print val_slide
    # use val_slide value
    return 'inputRange'

try:
    run(host = IP_ADDRESS, port= PORT)
except(KeyboardInterrupt):
    print('Done!')
    quit()

Answer 1

要从 GET 请求访问查询参数，您应该导入 request and use request.query 以按名称访问值：

from bottle import route, request

@route('/remote/inputRange')
def inputRange():
    val_slide = request.query.command
    print(val_slide)
    return val_slide

我不是 JavaScript 方面的专家，但据我所知，要发送实际值（不仅仅是静态文本），您需要将 val_slide 静态文本赋值替换为阅读值：

var val_slide = this.value;

将滑块值传递给瓶子路线功能

Pass slider value to bottle route function

python

ajax

jquery

bottle