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

我试图完成的工作流程如下。从Javascript和JQuery Mobile UI运行Python CGI脚本

有一个jQuery Mobile UI带有一堆范围滑块元素。每一个用于控制不同的功能。
当用户移动并释放这些滑块中的任何一个时，应该触发一个jQuery事件来进行AJAX调用（我不关心它是否使用JSON，XML，POST等 - 最快速度最好）
Ajax调用包含什么滑盖信息很感动，以及它的新值（例如：ID = slider1，值= 215）
阿贾克斯执行的CGI斌读取的ID和价值，并控制了一些Python脚本硬件通过串行连接到我的树莓派（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 event，但我无法让它工作。我也不确定向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调用函数。

我期待着人们可能对高层次问题的洞察力，或者解决我在此列出的更具体问题的方法。

谢谢！

来源

2013-02-21 Jeremy Blum

如何如下：

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

最后，蟒蛇：

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

来源

2013-02-21 23:35:36

感谢杰森 - 这是真正有用的参考代码！我基本上采用了你在这里概述的确切策略。 – 2013-02-22 19:42:14

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

回答

相关问题