Question

我正在创建一个将在嵌入式设备上运行的网站，该设备为用户提供了与该网站上的多个功能进行交互的界面。 HTML站点上的这些功能将连接到Python脚本，该脚本随后将控制连接到嵌入式设备的外部物理设备。

到目前为止，我有几个看起来像这样的按钮：

<button class="ui left attached button white" value="Button A - OFF" onClick='buttonTrigger(this.value)'>Button A</button>

buttonTigger.js方法如下：

function buttonTrigger(value) {
  document.location = "cgi-bin/command.cgi"
}

command.cgi如下所示：

#!/bin/bash

echo "Hello World!"

我的最终目标是让.cgi脚本将按下按钮的值传递给Python脚本。

这是我的问题：如何从buttonTrigger.js调用command.cgi并将value的{{1}}参数传递给方法？我的Python脚本将如何访问传递给.cgi脚本的变量？另外，我的Python脚本如何在不使用.cgi脚本的情况下直接从JS访问变量值？

编辑：因此Bottle可以处理查询字符串：

buttonTrigger

是否可以在不重新加载网页的情况下发送查询字符串？我不希望用户每次单击按钮时都重新加载我的页面，因为他们经常这样做。

Answer 1

这是使用bottle框架的示例。要运行此程序，请使用pip install bottle安装bottle，然后使用python app.py启动应用程序，默认情况下，该应用程序将在http://localhost:8000/上运行应用程序。

app.py

from bottle import request, route, run, static_file

@route('/')
def index():
    return static_file('index.html', './')

@route('/command')
def command():
    value = request.query.value
    return 'Value was set to: ' + value

run(host='0.0.0.0', port=8000, debug=True)

index.html

<!doctype html>
<html>
<head>
    <title>Python Example</title>
    <script>
        function buttonTrigger(value) {
            var output = document.getElementById('output');
            output.innerText = 'Button clicked, waiting for response...';

            fetch('command?value=' + value)
                .then(function(response) { 
                    return response.text();
                })
                .then(function(text) {
                    console.log(text);
                    output.innerText = text;
                });
        }
    </script>
</head>
<body>
    <button value="Button A - OFF" onClick='buttonTrigger(this.value)'>Button A</button>
    <div id="output"></div>
</body>
</html>

将HTML / JS变量传递给Python

1 个答案: