Call python function from JS

Question

I am trying to call a function in Python from my JavaScript code. I used the code explained here but it does not work for me.

Here is my JS code:

<!DOCTYPE html>
<body>
<script type="text/javascript" src="d3/d3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
<script>
text ="xx";

$.ajax({
type: "POST",
url: "~/reverse_pca.py",
data: { param: text}
}).done(function(o) {
    console.log(data);
    console.log(text);
});

Python Code:

import csv
from numpy import genfromtxt
from numpy import matrix

def main():
    ...
    return x 
if __name__ == "__main__":
    x=main()
    return x;

Do you know what is wrong with it?

~/reverse_pca.py is a relative path and it looks like it is meant to be an absolute path. Anyway, you should mention any error messages (because "does not work" can mean many things) and you should watch the web server logs. — betterworld
– betterworld, Commented Aug 29, 2015 at 18:37

Community · Accepted Answer · 2017-05-23 11:46:23Z

26

Apart from the mentioned points and assuming you already have a proper setup to serve your python script and return the response. You should submit an asynchronous request, especially if the python code does some heavy computation.

function postData(input) {
    $.ajax({
        type: "POST",
        url: "/reverse_pca.py",
        data: { param: input },
        success: callbackFunc
    });
}

function callbackFunc(response) {
    // do something with the response
    console.log(response);
}

postData('data to process');

If you only do some light computation and you have no problem working with a code deprecated as of jQuery 1.8, go with the synchronous approach. This is not recommended as it blocks the main thread.

function runPyScript(input){
    var jqXHR = $.ajax({
        type: "POST",
        url: "/reverse_pca.py",
        async: false,
        data: { param: input }
    });

    return jqXHR.responseText;
}

// do something with the response
response= runPyScript('data to process');
console.log(response);

Read more about it here: How do I return the response from an asynchronous call? and http://api.jquery.com/jquery.ajax/

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Aug 30, 2015 at 1:48

Farshid T

2,3531 gold badge22 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SubtleCoder Over a year ago

I'm getting '$' not defined. Please Help.

Farshid T Over a year ago

@SubtleCoder you need to import jQuery; see w3schools.com/jquery/jquery_get_started.asp

David C. · Accepted Answer · 2018-05-06 15:52:22Z

21

After searching for few hours, I ended up having the following, and it worked well. Hope this helps someone else in future.

HTML and JS code: loging.html:

<html>
 <head>
    <title>Flask Intro - login page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="http://code.jquery.com/jquery 2.1.4.min.js"></script>  
 </head>
 <body>
    <input id="submitbutton" type="submit" value="Test Send Data">
    <!----------------------------------->
    <script type="text/javascript">

    function runPyScript(input){
        var jqXHR = $.ajax({
            type: "POST",
            url: "/login",
            async: false,
            data: { mydata: input }
        });

        return jqXHR.responseText;
    }

    $('#submitbutton').click(function(){
        datatosend = 'this is my matrix';
        result = runPyScript(datatosend);
        console.log('Got back ' + result);
    });

</script>

Python code: app.py:

from flask import Flask, render_template, redirect, url_for,request
from flask import make_response
app = Flask(__name__)

@app.route("/")
def home():
    return "hi"
@app.route("/index")

@app.route('/login', methods=['GET', 'POST'])
def login():
   message = None
   if request.method == 'POST':
        datafromjs = request.form['mydata']
        result = "return this"
        resp = make_response('{"response": '+result+'}')
        resp.headers['Content-Type'] = "application/json"
        return resp
        return render_template('login.html', message='')

if __name__ == "__main__":
    app.run(debug = True)

edited May 6, 2018 at 15:52

David C.

2,0022 gold badges22 silver badges29 bronze badges

answered Aug 30, 2015 at 17:26

Bahador Saket

1,0451 gold badge13 silver badges24 bronze badges

2 Comments

henos Over a year ago

$ is not defined error error 2

That'sIs JustCrazy Over a year ago

@henos The jQuery file didn't load. The original URL has an error. This part "jquery 2.1.4" should be "jquery-2.1.4" with the hyphen instead of the space.

Collectives™ on Stack Overflow

Call python function from JS

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related