从Javascript和JQuery Mobile UI运行Python CGI脚本

我试图完成的工作流程如下。

有一个jQuery Mobile UI，其中包含一堆范围滑块元素。每一个都用于控制不同的功能
当用户移动并释放这些滑块中的任何一个时，应该触发一个jQuery事件来进行AJAX调用（我不在乎它是否使用JSON、XML、POST等-最快是最好的）
Ajax调用包含关于移动了什么滑块及其新值的信息（例如：id=slider1，value=215）
Ajax在CGI bin中执行一个python脚本，该脚本读取ID和值，并控制通过Serial连接到我的Raspberry Pi的一些硬件（Raspberrry Pi也运行Web服务器）

我有一个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调用函数。

我期待着人们对我在这里列出的高层问题或解决更具体问题的方法有任何见解。

谢谢！

以下内容如何：

...
<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"}))

相关内容

最新更新

热门标签：