从运行Javascript和jQuery Mobile的用户界面的Python CGI脚本 [英] Running Python CGI Scripts from Javascript and JQuery Mobile UI

问题描述

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

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

• 有一个jQuery Mobile的用户界面与一群范围滑块元素。每一个是用于控制不同的功能。
• 当用户移动并释放这些滑块中的任何一个，一个jQuery事件应被触发，使一个AJAX调用（如果它使用JSON，XML，POST，等我不在乎 - 最快最好）
• 在Ajax调用包含什么滑块移到信息，以及其新值（例如：ID = slider1，值= 215）
• 在阿贾克斯执行的CGI斌读取的ID和价值，并控制一些硬件通过串口（树莓PI还运行Web服务器）连接到我的树莓派一个Python脚本。

我有一个jQuery UI一堆滑块。每个滑块code是这样的：

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>

需要有一些相关的JQuery的，做这样的事情：

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);
    }

    });

});

显然，两个主要的事情还得改一下JS。首先，它需要当滑块被释放（未在页加载）来执行，并且第二它需要实际传递滑块的值到Python脚本一些如何。我设置了这样只是为了测试。当我加载页面，在此测试Python脚本正确执行，和一些硬件连接到树莓派被适当控制。我知道我应该使用 slidestop事件，但我无法得到它的工作。我也不能确定究竟是一些变量发送给python脚本的最佳方式。

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.

我的Python脚本是这样的，现在：     ＃！的/ usr / bin中/蟒蛇

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!\n")      # write a string
ser.close()

所以，它不寻求任何类型的输入数据，它只是被调用，并写入一些串行数据。它应该能够从AJAX调用接收数据，并调整基于它接收到的信息的串行写入命令。我需要帮助，让这些信息成为变量，我可以工作。我想我也应该传回一些消息的我做回的JavaScript调用函数。

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.

谢谢！

推荐答案

如何如下：

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

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

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

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