如何从从 javascript 发送到 flask 的 post 请求中获取返回值

Question

New to flask here. I need to pass an integer variable from html/javascript to python flask in order to perform a calculation and return the result value to javascript so that I can display it on the DOM without refreshing the page. Below is the HTML structure I'm dealing with.

<form action="/buy" method="post" id="buy-form">

    <h4>Price</h4>
    <input
      type="text"
      id="limit-price"
      name="limit-price"
    />

    <h4>Quantity</h4>
    <input
      type="text"
      id="limit-quantity"
      name="limit-quantity"
    />

    <button type="button" id="maximize-buy">Max</button>

    <input type="submit" name="buy" value="BUY" id="submit-buy" />

</form>

I want to pass the value thats typed into the limit-price text input over into flask (using Javascript) at the click of the maximize-buy button in order to perform a calculation in python flask and then return that result back to Javascript so that I can display it on the page without refreshing.

Answer 1

What you want is AJAX: https://www.w3schools.com/xml/ajax_intro.asp

You could use an XMLHttpRequest:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

An example of this would be something like:

let price = document.getElementById("limit-price").innerHTML;
let xhttp = new XMLHttpRequest();
let resp;
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        resp = this.responseText;
        // display_result_here_in_js
    }
};
xhttp.open("POST", "/do_cool_calculation_stuff", true);
xhttp.send({"price":price});

Python code would be along the lines of:

@app.route("/do_cool_calculation_stuff",methods=["POST"])
def calculationStuff():
    price = request.values["price"]
    ...
    return calculation