从JavaScript和jQuery移动UI运行Python CGI脚本

Question

我想实现的工作流程如下：

• 我有一个使用 jQuery Mobile 的用户界面，上面有很多滑块元素。每个滑块控制不同的功能。
• 当用户移动并释放任何一个滑块时，应该触发一个 jQuery 事件，这个事件会发起一个 AJAX 请求（我不在乎用 JSON、XML、POST 等，速度快的最好）。
• 这个 AJAX 请求包含了关于哪个滑块被移动的信息，以及它的新值（例如：id=slider1，value=215）。
• 这个 AJAX 请求会执行一个在 CGI bin 中的 Python 脚本，这个脚本会读取 ID 和值，并控制一些通过串口连接到我的 Raspberry Pi 的硬件（Raspberry Pi 也在运行网络服务器）。

我的 jQuery UI 有一堆滑块。每个滑块的代码看起来像这样：

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <div class="rgbw_label"><label for="red_slider">
            Red:
        </label></div>
        <input type="range" id="red_slider" name="red_slider" value="0" min="0" max="255" data-highlight="true" />
    </fieldset>
</div>

需要一些配套的 jQuery 代码，做类似这样的事情：

 $(document).ready(function () {
$.ajax({
    type: "POST",
    url: "cgi-bin/command.py",
    success: function (msg)
    {
        alert("Data Saved: " + msg);
    }

    });

});

显然，JS 有两个主要的地方需要改变。首先，它需要在滑块释放时执行（而不是在页面加载时），其次，它需要以某种方式将滑块的值传递给 Python 脚本。我这样设置只是为了测试。当我加载页面时，这个测试的 Python 脚本能正确执行，并且能够正确控制连接到 Raspberry Pi 的一些硬件。我知道我应该使用 slidestop 事件，但我无法让它工作。我也不确定将一些变量发送到 Python 脚本的最佳方法是什么。

我现在的 Python 脚本看起来是这样的： #!/usr/bin/python

import cgi

import serial
ser = serial.Serial('/dev/ttyUSB0', 57600)
ser.write("Hello, this is a command!\n")      # write a string
ser.close()

所以，它并没有寻找任何类型的输入数据，它只是被调用并写入一些串口数据。它应该能够接收来自 AJAX 请求的数据，并根据接收到的信息调整串口写入命令。我需要帮助将这些信息放入我可以使用的变量中。我想我还应该向调用的 JavaScript 函数返回某种“我完成了”的消息。

我期待大家对高层次的问题或解决我在这里列出的一些具体问题的建议。

谢谢！

Answer 1

下面这个怎么样：

...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
...
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <div class="rgbw_label"><label for="red_slider">
            Red:
        </label></div>
        <input type="range" id="red_slider" name="red_slider" class="posting-slider" data-slider-id="1" value="0" min="0" max="255" data-highlight="true" />
    </fieldset>
</div>

接下来是这段Javascript代码：

$(document).ready(function() {
    $('.posting-slider').on('slidestop', function(e) {
        $.post('/server/script.py', { id: $(this).data('slider-id'), value: e.target.value }, function(data, textStatus, jqXHR) {
            console.log('POSTed: ' + textStatus);
        });
    });
});

最后是这段Python代码：

import cgi
form = cgi.FieldStorage()

import json

import serial
ser = serial.Serial('/dev/ttyUSB0', 57600)
ser.write("Hello, this is a command for value %s from slider id %s!\n" % (form["id"], form["value"]))      # write a string
ser.close()

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