Javascript 如何从jQueryMobile滑块向python传递值_Javascript_Jquery Mobile_Slider_Cgi

Javascript 如何从jQueryMobile滑块向python传递值

javascript jquery-mobile

Javascript 如何从jQueryMobile滑块向python传递值,javascript,jquery-mobile,slider,cgi,Javascript,Jquery Mobile,Slider,Cgi,我正在尝试使用jQuery移动滑块设置一个网页，该滑块将滑块的值传递给python脚本。最终目标是通过运行连接到Arduino的马达的网站，使用此滑块控制python脚本。滑块应控制电机的速度我正在修改来自的代码，但我无法真正让它工作这是我的index.html <!DOCTYPE html> <html> <head> <title>Slider Test</title> <link rel="styl

我正在尝试使用jQuery移动滑块设置一个网页，该滑块将滑块的值传递给python脚本。最终目标是通过运行连接到Arduino的马达的网站，使用此滑块控制python脚本。滑块应控制电机的速度

我正在修改来自的代码，但我无法真正让它工作

这是我的index.html

<!DOCTYPE html> 
<html>
  <head>
    <title>Slider Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js">    </script>
    <script>
        $(document).ready(function() {
            $('.posting-slider').on('slidestop', function(e) {
            $.post('cgi-bin/script.py', { id: $(this).data('slider-id'), value: e.target.value }, function(data, textStatus, jqXHR) {
                console.log('POSTed: ' + textStatus);
            });
        });
    });
</script>
</head>
<body>
<div data-role="page"> 
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <div class="rgbw_label">
                <label for="red_slider">
                Slider 1:
                </label>
            </div>
            <input type="range" id="slider1" name="slider1" class="posting-slider" data-slider-id="1" value="0" min="0" max="100" data-highlight="true" />
        </fieldset>
    </div>

    <div data-role="footer">
    <h4>Page Footer</h4>
    </div> 
</div>

我在raspberry pi上用apache2服务器运行它

网页正在按预期加载滑块。另外，当我转到localhost/cgi-bin/script.py时，脚本将运行并生成test.txt文件

问题似乎在于javascript，它没有触发script.py文件运行，我不知道它是否正确传递了值

有人能看到问题吗？谢谢

看起来您使用的jQuery版本太旧了。调试时，我看到您选择的slider元素没有“on”方法。当我在jQuery1.9.1中尝试相同的示例时，效果很好

请查看：

<!DOCTYPE html> 
<html>
  <head>
    <title>Slider Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script>
        $(document).ready(function() {
            var slider = $('#slider1');
            $('#slider1').on('slidestop', function(e) {
            $.post('cgi-bin/script.py', { id: $(this).data('slider-id'), value: e.target.value }, function(data, textStatus, jqXHR) {
                console.log('POSTed: ' + textStatus);
            });
        });
    });
</script>
</head>
<body>
<div data-role="page"> 
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <div class="rgbw_label">
                <label for="red_slider">
                Slider 1:
                </label>
            </div>
            <input type="range" id="slider1" name="slider1" class="posting-slider" data-slider-id="1" value="0" min="0" max="100" data-highlight="true" />
            <!-- <input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100" /> -->
        </fieldset>
    </div>

    <div data-role="footer">
    <h4>Page Footer</h4>
    </div> 
</div>


滑块试验
$（文档）.ready（函数（）{
变量滑块=$（“#滑块1”）；
$（'slider1'）。on（'slidestop'，函数（e）{
$.post（'cgi-bin/script.py'，{id:$（this）.data（'slider-id'），值：e.target.value}，函数（数据，textStatus，jqXHR）{
console.log（'POSTed:'+textStatus）；
});
});
});
滑块1：
页脚

Brilliant，这是版本号。jQuery1.9.1工作正常，但似乎弄乱了滑块的样式，所以我使用1.8.2，所以设置与。谢谢没问题，在线浏览这么多参考了这么多不同jquery版本/组合的资源可能会让人困惑。Chrome调试器是保持理智的关键。祝你好运，听起来像是一个不错的项目。不要在jQM中使用

.ready（）

。为什么？我将如何编写它呢？将它绑定到JQM事件。

<!DOCTYPE html> 
<html>
  <head>
    <title>Slider Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script>
        $(document).ready(function() {
            var slider = $('#slider1');
            $('#slider1').on('slidestop', function(e) {
            $.post('cgi-bin/script.py', { id: $(this).data('slider-id'), value: e.target.value }, function(data, textStatus, jqXHR) {
                console.log('POSTed: ' + textStatus);
            });
        });
    });
</script>
</head>
<body>
<div data-role="page"> 
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <div class="rgbw_label">
                <label for="red_slider">
                Slider 1:
                </label>
            </div>
            <input type="range" id="slider1" name="slider1" class="posting-slider" data-slider-id="1" value="0" min="0" max="100" data-highlight="true" />
            <!-- <input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100" /> -->
        </fieldset>
    </div>

    <div data-role="footer">
    <h4>Page Footer</h4>
    </div> 
</div>