No response when I tried to pass data to Flask endpoint from jquery

Question

I have a web page where users enter data in a input field. I am trying to pass the entered data to a python script, process it and get back a response. I am running a XAMPP server and modified the httpd.conf file according to this answer.

Frontend:

<script>
            let reviewtext;
            $("#reviewbox").change(function () {
                reviewtext = $('#reviewbox').val();
            });

            $("#submit").click(function (event) {
                let message = {
                    review: reviewtext
                }

                $.ajax({
                    type: "POST",
                    url: "http://127.0.0.1:80/first.py",
                    data: JSON.stringify(message),
                    success: function (response) {
                        alert("Success");
                    },
                    error: function (data) {
                        alert("Fail");
                    },
                });
            });
</script>

Python:

#!C:/Users/xitis/AppData/Local/Programs/Python/Python37-32/python.exe

print("Content-Type: text/html\n")

from flask import request
from flask import jsonify
from flask import Flask

app = Flask(__name__)

@app.route('/first.py', methods=['POST'])

def predict():
    response = {
        'status' : "Success"
    }
    return jsonify(response)

When I run the web page, I dont get any response. The post request is not executing.
Is it even possible to do this ?
Do I have to recreate the entire web site using Flask for this to work ?

Answer 1

There are some things you should know before try this example.

First of all, the endpoint below is not valid, since you aren't exposing a python file to be acessible, but a HTTP endpoint.

 url: "http://127.0.0.1:80/first.py",

You should expose a predict resources, and use the HTTP Verbs to change its state:

# Do prediction analysis
@app.route('/predict', methods=['POST'])
def predict():
    result = store_predict_data(request.data)
    response = {
        'id': result.id,
        'status' : result
    }
    return jsonify(response)
# get predict analysis result 
@app.route('/predict/{id}', methods=['GET'])
def post_predictable_data():
    ...

As shown above, Flask uses werkzeug package, and at this package, there is a request object which has a data attribute, that allows you to get the payload you sent from javascript.

When you're using a web application framework, you'll end up having an app which communicates over HTTP, and as all network communication you should set the port, which is by default 5000 on Flask, you can change it to 80, but make sure you're the only one using it.

You can run your flask server, just for development purposes:

FLASK_APP=flask_webserver.py flask run --port 8080
 * Serving Flask app "flask_webserver.py"
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:8080/ (Press CTRL+C to quit)

then, when you curl it, you'll get a result:

curl -d 'forking' -X POST localhost:8080                                                                                 
Hello, forking World! 

that's the code to reproduce the example above

from flask import Flask
from flask import request

app = Flask(__name__)

@app.route('/', methods=['POST','GET'])
def hello_world():
    return 'Hello, %s World!' % request.data.decode('UTF-8')

UPDATE REGARDING XAMPP

Since you're running from XAMPP try to put the lines below at the end of your file.

if __name__ == '__main__':
   app.run()

Take a look over here for details