从 Javascript 和 JQuery Mobile UI 运行 Python CGI 脚本 [英] Running Python CGI Scripts from Javascript and JQuery Mobile UI

问题描述

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

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

我有一个带有一堆滑块的 JQuery UI.每个滑块代码如下所示:

<fieldset data-role="控制组"><div class="rgbw_label"><label for="red_slider">红色的:</label></div><input type="range" id="red_slider" name="red_slider" value="0" min="0" max="255" data-highlight="true"/></fieldset>

需要一些附带的 JQuery 来做这样的事情:

 $(document).ready(function () {$.ajax({类型:POST"，url: "cgi-bin/command.py",成功:功能(味精){alert("数据保存:" + msg);}});});

很明显，关于 JS 有两个主要的事情必须改变.首先，它需要在滑块被释放时执行(不是在页面加载时)，其次它需要以某种方式将滑块的值实际传递给 Python 脚本.我这样设置只是为了测试.当我加载页面时，这个tester python脚本被正确执行，并且连接到树莓派的一些硬件被正确控制.我知道我应该使用 slidestop 事件，但是我无法让它工作.我也不确定将一些变量发送到 python 脚本的最佳方式是什么.

我的 python 脚本现在是这样的:#!/usr/bin/python

导入 cgi导入序列ser = serial.Serial('/dev/ttyUSB0', 57600)ser.write("你好，这是一个命令！
") # 写一个字符串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="控制组"><div class="rgbw_label"><label for="red_slider">红色的:</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>

使用以下 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);});});});

最后是蟒蛇:

导入 cgi表单 = cgi.FieldStorage()导入json导入序列ser = serial.Serial('/dev/ttyUSB0', 57600)ser.write("Hello, this is a command for value %s from slider id %s!
" % (form["id"], form["value"])) # 写一个字符串ser.close()打印内容类型:应用程序/json"打印打印(json.JSONEncoder().encode({"status":"ok"}))

The workflow I'm trying to accomplish is as follows.

• There is a jQuery Mobile UI with a bunch of range slider elements. Each one is for controlling a different function.
• When a user moves and releases any one of these sliders, a jQuery event should be triggered that makes an AJAX call (I don't care if it uses JSON, XML, POST, etc - fastest is best)
• The Ajax call contains info about what slider was moved, and what its new value is (ex: id=slider1, value=215)
• The Ajax executes a python script in the CGI bin that reads the ID and value and controls some hardware connected to my Raspberry Pi via Serial (the Raspberry pi also running the webserver).

I have a JQuery UI with a bunch of sliders. Each slider code looks like this:

<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>

There needs to be some accompanying JQuery that does something like this:

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

    });

});

Obviously two major things have to change about the JS. First, it needs to execute when the slider is released (not on page load), and second it needs to actually pass the value of the slider to the Python script some how. I set it up like this just to test. When I load the page, this tester python script is executed correctly, and some hardware connected to the Raspberry Pi is controlled properly. I know I should be using the slidestop event, but I can't get it to work. I'm also not sure of what is the BEST way to send some variables to the python script.

My python script looks like this, right now: #!/usr/bin/python

import cgi

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

So, it's not looking for any kind of incoming data, it just gets called and writes some Serial data. It should be able to receive data from the AJAX call, and adjust the Serial writing command based on the info it receives. I need help getting that info into variables that I can work with. I assume I should also pass back some kind of "I'm done" message back to the JavaScript calling function.

I'm looking forward to any insight that folks might have on either high level issues, or ways to solve more specific problems that I've listed here.

Thanks!

解决方案

How about the following:

...
<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>

With the following 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);
        });
    });
});

and finally, the 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!
" % (form["id"], form["value"]))      # write a string
ser.close()

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

这篇关于从 Javascript 和 JQuery Mobile UI 运行 Python CGI 脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！