How to execute python function from jquery post

Question

I would like to call a python function when an image (button) is clicked which would allow me to control the servo from the web interface.

Here is part of my jQuery code:

$('#left_button').click(function(){
            $.post("cameraservo2.py", {direction:"left"}).done(function (reply) {
                $('#camerapos').empty().append(reply);
                alert("left button clicked");});

        });

And this is my Python code:

#!/usr/bin/python

def index (self, **data):

    import pigpio
    import time

    servos=4
    key = data['direction']

    m=1500
    while (m >= 500 and m <= 2500):
        if (key =="left"):
            m=m+100
        elif (key =="right"):
            m=m-100

    pigpio.start()

    pigpio.set_servo_pulsewidth(servos, m) 
    servostatus= "Servo {} {} micro pulses".format(servos[0], key, m)
    print servostatus
    time.sleep(1)

    pigpio.stop()

    return servostatus

My problem is when the button is clicked, it will alert "left button is clicked" which means it has run through the python file. But instead of showing the "servostatus", i get the whole python code displayed in my #camerapos div.

Please let me know if i need to post more information. Thanks!!

Answer 1

You need some additional tools in order to call server side python code from client side query. Flask, a lightweight python web framework is often the tool of choice for problems like this.

Flask documentation: http://flask.pocoo.org

Flask with JQuery: http://flask.pocoo.org/docs/patterns/jquery/

Flask with Jquery POST: how can I use data posted from ajax in flask?

To use POST with Flask/Jquery, you must annotate the receiving method in python. Your code would look something like this.

@app.route('/servo_pos', method=["POST"])
def servo_pos():
    do_your_work_here
    return jsonify({"servo_pos", ret_val})

You'll also need to tweak your jquery a bit.

$('#left_button').click(function(){
            $.post("/servo_post", {direction:"left"}).done(function (reply) {
                $('#camerapos').empty().append(reply);
                alert("left button clicked");});

        });

I'm not sure about this step, but you may also need to replace .post with .ajax. Since you don't want the page to reload before you display the new contents, this isn't a traditional post request, but rather an ajax one.

Alternatively, is there a reason that you MUST be using a post request, and a GET_JSON won't work, like in the jquery ajax pattern above?

Key notes:

1. add `methods=['POST']
2. data request argument is found in data.request.data
3. return data in a "jsonified" dictionary requires from Flask import jsonfiy

Answer 2

In addition to running a full server-side python web framework, a minimal approach could be to use cgi eg uwsgi .

See the official python docs for more information on minimal working setups.

Interactivity

If your webapp requires more interactivity with the server, you might want to consider using websockets instead of AJAX as a communication framework. Caveat: WebSockets aren't supported by older browsers.

An example of a well developed framework that has websocket support is tornado .