Question

我试图设置一个带有jQuery Mobile滑块的网页，该滑块将滑块的值传递给python脚本。最终目标是使用此滑块通过运行连接到Arduino的电机的网站来控制python脚本。滑块应控制电机的速度。

我正在调整Running Python CGI Scripts from Javascript and JQuery Mobile UI中的代码，但我无法让它发挥作用。

这是我的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>

这是我的script.py（在cgi-bin文件夹中）。

#!/usr/bin/env python
import cgi
form=cgi.FieldStorage()

import json

#Real code I will be running, haven't tested it yet
#import serial
#ser = serial.Serial('dev/ttyACM0', 9600)
#ser.write("%s\n" % (form["value"]))
#ser.close()

#Testing code
file=open('test.txt', "w")
file.write("HELLO")
file.close()

print "Content-type: application/json"
print
print(json.JSONEncoder().encode({"status":"ok"}))

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

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

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

有人能看到问题吗？谢谢！

Answer 1

看起来你正在使用太旧的jQuery版本。调试时，我看到你选择的滑块元素没有'on'方法。当我用jquery 1.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>

如何从jQueryMobile Slider传递值到python

1 个答案: