0

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

我正在调整从 Javascript 和 JQuery 移动 UI 运行 Python CGI 脚本中的代码，但我无法真正让它工作。

这是我的 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 服务器的树莓派上运行它。

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

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

任何人都可以看到问题吗？谢谢！

4

1 回答 1

2

看起来您使用的是太旧的 jQuery 版本。调试时，我看到您选择的滑块元素没有“打开”方法。当我使用 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>
于 2013-08-14T08:44:00.533 回答