從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腳本

回答

相關問題