@ app.route在没有重定向的情况下不起作用

Question

This function is working perfectly if I do a redirect to another page @app.route('/results') but I'm struggling to make it work in the same page without reloading :

@app.route('/')
def static_file():
    return app.send_static_file('index.html')

@app.route('/')
def results():
    headers = {
        'X-ApiKey': 'xxxxxxxxxxxxxxxx',
    }

    data = {'data': request.args.get('data')}

    results = requests.post('https://apiv2.indico.io/personality', headers=headers, data=data)
    return results.text

I'd like to display the results of the api call in the same page (below the input box)

<form action="" onsubmit="return false";>
  <strong> Try It <br><br>
  </strong><br>
  <input type="text" name="data"><br><br>
        <input type="submit" onclick="showResults();">
        <label id:Results>Your Result: </label>
        <p><span id='display'></span></p>
    </form>

I've also added some JS:

 <script language="JavaScript">
    function showResults() {
        document.getElementById('display').innerHTML = 
                    document.getElementById("Results").value;
    }
  </script>

What's wrong with my code? I'm using Flask framework.

Answer 1

If I understood you correctly, what you want to achieve is to have RESTful API written in Flask microframework, which would allow you to obtain some results and display on your page without reloading. If so, your approach is wrong.

Firstly, you can't route multiple functions with common URL:

@app.route('/common_route')
def foo():
    pass
@app.route('/common_route')
def bar():
    pass

It is impossible to determine which function did you want to be invoked if you load http://yourwebsite/common_route .

In order to avoid page reloading, you should rather use Flask-RESTful module and implement an API for obtaining results.

import flask-restful
class Results(Resource):
    def __init__(self):
        super(Results)
    #for GET requests
    def get(self):
        #your code here
        pass
    #for POST requests
    def post(self):
        #your code here
        pass

api = Api(app)
api.add_resource(Results(),'/api/results')

Then you can obtain your results fe with JS & jQuery code: https://www.w3schools.com/jquery/jquery_ajax_get_post.asp