Web app using python as backend and html as frontend

Question

I am trying to create a web app using python (flask) as backend and html as frontend. So from the browser when I type a value in an input box and hit submit button it should send this data to the server (the python code using flask) and this should return back a response like "hello, that value!". It works correctly when I send first value but this doesn't happen when I send the second value. It shows errors in anaconda prompt. (I am using windows 10. python file name: good.py, html file name: eval.html). Here's the code for both.
good.py file below

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

app = Flask(__name__)

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


def evaluation1():
    parameter1 = request.get_json(force=True)
    return1 = parameter1['return1']
    response1 = {
        'reference1': 'Hello, ' + return1 + '!'
    }
    return jsonify(response1)


def evaluation2():
    parameter2 = request.get_json(force=True)
    return2 = parameter2['return2']
    response2 = {
        'reference2': 'Hello, ' + return2 + '!'
    }
    return jsonify(response2)

def evaluation3():   
    parameter3 = request.get_json(force=True)
    return3 = parameter3['return3']
    response3 = {
        'reference3': 'Hello, ' + return3 + '!'
    }
    return jsonify(response3)

def evaluation4():    
    parameter4 = request.get_json(force=True)
    return4 = parameter4['return4']
    response4 = {
        'reference4': 'Hello, ' + return4 + '!'
    }
    return jsonify(response4)

def evaluation5():
    parameter5 = request.get_json(force=True)
    return5 = parameter5['return5']
    response5 = {
        'reference5': 'Hello, ' + return5 + '!'
    }
    return jsonify(response5)

def evaluation6():    
    parameter6 = request.get_json(force=True)
    return6 = parameter6['return6']
    response6 = {
        'reference6': 'Hello, ' + return6 + '!'
    }
    return jsonify(response6)

def evaluation7():    
    parameter7 = request.get_json(force=True)
    return7 = parameter7['return7']
    response7 = {
        'reference7': 'Hello, ' + return7 + '!'
    }
    return jsonify(response7)

def evaluation8():    
    parameter8 = request.get_json(force=True)
    return8 = parameter8['return8']
    response8 = {
        'reference8': 'Hello, ' + return8 + '!'
    }
    return jsonify(response8)

eval.html file below

<!DOCTYPE html>
<html>
<head>
    <title>Good Hybrid Funds</title>
    <style>
        *{
            font-size:30px;
        }
    </style>
</head>
<body>
    <input id="expense" type="text"/>
    <button id="expense-button">Submit Expense Ratio</button>
    <p id="reference1"></p>

    <input id="sharpe" type="text"/>
    <button id="sharpe-button">Submit Sharpe Ratio</button>
    <p id="reference2"></p>

    <input id="sortino" type="text"/>
    <button id="sortino-button">Submit Sortino Ratio</button>
    <p id="reference3"></p>

    <input id="alpha" type="text"/>
    <button id="alpha-button">Submit Alpha Value</button>
    <p id="reference4"></p>

    <input id="beta" type="text"/>
    <button id="beta-button">Submit Beta Value</button>
    <p id="reference5"></p>

    <input id="stddev" type="text"/>
    <button id="stddev-button">Submit Standard Deviation</button>
    <p id="reference6"></p>

    <input id="rsquared" type="text"/>
    <button id="rsquared-button">Submit R Squared Value</button>
    <p id="reference7"></p>

    <input id="netreturns" type="text"/>
    <button id="netreturns-button">Submit Net Returns</button>
    <p id="reference8"></p>


    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $("#expense-button").click(function(event){
            let parameter1 = {
                return1: $("#expense").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter1), function(response1){
                $("#reference1").text(response1.reference1);
                console.log(response1);
            });
        });

        $("#sharpe-button").click(function(event){
            let parameter2 = {
                return2: $("#sharpe").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter2), function(response2){
                $("#reference2").text(response2.reference2);
                console.log(response2);
            });
        });

        $("#sortino-button").click(function(event){
            let parameter3 = {
                return3: $("#sortino").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter3), function(response3){
                $("#reference3").text(response3.reference3);
                console.log(response3);
            });
        });

        $("#alpha-button").click(function(event){
            let parameter4 = {
                return4: $("#alpha").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter4), function(response4){
                $("#reference4").text(response4.reference4);
                console.log(response4);
            });
        });

        $("#beta-button").click(function(event){
            let parameter5 = {
                return5: $("#beta").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter5), function(response5){
                $("#reference5").text(response5.reference5);
                console.log(response5);
            });
        });

        $("#stddev-button").click(function(event){
            let parameter6 = {
                return6: $("#stddev").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter6), function(response6){
                $("#reference6").text(response6.reference6);
                console.log(response6);
            });
        });

        $("#rsquared-button").click(function(event){
            let parameter7 = {
                return7: $("#rsquared").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter7), function(response7){
                $("#reference7").text(response7.reference7);
                console.log(response7);
            });
        });

        $("#netreturns-button").click(function(event){
            let parameter8 = {
                return8: $("#netreturns").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter8), function(response8){
                $("#reference8").text(response8.reference8);
                console.log(response8);
            });
        });
    </script>
</body>
</html>

enter image description here

Hi Vinita Kumari. Its unclear what you mean by "send first value" and "send second value". Also please never say "there is an error" without posting the actual error (with its stacktrace). — Florian H
– Florian H, Commented Aug 28, 2019 at 6:15
Browser here is the client that sends a numeric value to the server (python code). Then the server should send a response back "hello, that value!" . Also isn't the screenshot of output and errors visible ? I'll look into this if it isn't. — Vinita Kumari
– Vinita Kumari, Commented Aug 28, 2019 at 6:20

Florian H · Accepted Answer · 2019-08-28 06:21:06Z

3

You need to define an own and unique route for everey method you wanna call.

Your flask code needs to look like this:

@app.route('/evaluation1', methods=['POST'])
def evaluation1():
    parameter1 = request.get_json(force=True)
    return1 = parameter1['return1']
    response1 = {
        'reference1': 'Hello, ' + return1 + '!'
    }
    return jsonify(response1)

@app.route('/evaluation2', methods=['POST'])
def evaluation2():
    parameter2 = request.get_json(force=True)
    return2 = parameter2['return2']
    response2 = {
        'reference2': 'Hello, ' + return2 + '!'
    }
    return jsonify(response2)


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

Therefore you need to call the specific link (flasks route) for the method you want to call:

    $("#expense-button").click(function(event){
        let parameter1 = {
            return1: $("#expense").val()
        }
        $.post("http://127.0.0.1:5000/evaluation1", JSON.stringify(parameter1), function(response1){
            $("#reference1").text(response1.reference1);
            console.log(response1);
        });
    });

    $("#sharpe-button").click(function(event){
        let parameter2 = {
            return2: $("#sharpe").val()
        }
        $.post("http://127.0.0.1:5000/evaluation2", JSON.stringify(parameter2), function(response2){
            $("#reference2").text(response2.reference2);
            console.log(response2);
        });
    });

answered Aug 28, 2019 at 6:21

Florian H

3,0722 gold badges16 silver badges27 bronze badges

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

2 Comments

Vinita Kumari Over a year ago

hello, how can I return response1, response2, ... so on based on some conditions like if expense ratio > 0.75: return "good" else "bad" Expense ratio is one of the value being sent from browser like return1, return2, ...

Florian H Over a year ago

almost like you said: if expense ratio > 0.75: return jsonify("good") else: return jsonify("bad"). If you want to send multiple parameters in both directions you can send them as a dictionary and access them like a python dict.

Collectives™ on Stack Overflow

Web app using python as backend and html as frontend

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related