CODEWITHSUNDEEP
javascriptpythonhtmlvariables
Owen
Owen

Reputation: 1

Passing HTML/JS variables to Python

I am creating a site that will run on an embedded device that provides an interface for the user to interact with several functions on the site. These functions on the HTML site will interface to a Python script which will then control external physical devices connected to the embedded device.

So far, I have several buttons that look like this:

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

The buttonTigger.js method looks as follows:

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

command.cgi looks as follows:

#!/bin/bash

echo "Hello World!"

My end goal is to have the .cgi script pass the value of the button pressed to a Python script.

Here is my question: How do I invoke command.cgi from buttonTrigger.js and pass the value parameter from the buttonTrigger to the method? How will my Python script access the variables passed to the .cgi script? Alternatively, how can my Python script directly access the variable values from JS without a .cgi script?

EDIT: So Bottle has the ability to handle query strings: 

from bottle import route, request, response, template
@route('/forum')
def display_forum():
    forum_id = request.query.id
    page = request.query.page or '1'
    return template('Forum ID: {{id}} (page {{page}})', id=forum_id, page=page)

Is there a way to send a query string without reloading the webpage? I don’t want my page to reload every time a user clicks a button as they will do so quite frequently.

Upvotes: 0

Views: 2404

Answers (1)

Brian
Brian

Reputation: 1908

This is an example using the bottle framework. To run this, install bottle using pip install bottle, and then start the application using python app.py, which will run the application on http://localhost:8000/ by default.

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>

Upvotes: 1

Related Questions