Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ajax POST returning render_template in Flask?

I have some form which should be sent to the server (as POST request), store a certain object in the DB and return back a new template with some data.

In normal conditions, this would just work fine, but the issue here is that from the form data a quite complex JSON object is created, and that is what should be stored in the database. The JSON is successfully retrieved but the template redirection isn't working:

@app.route('/entry', methods=['GET', 'POST'])
def entry():
    if request.method == 'GET':
        #Do some stuff
        return render_template('entry.html')

    elif request.method == 'POST':
        #Store the JSON object received and return back a new template with some data
        data = request.json
        db.store(data)
        #Retrieve some other data
        other_data = ...
        return render_template('diary.html', data=other_data)

I would like to know what is the general approach in these situations (I'm pretty new to Python and Flask itself). To me it looks like this shouldn't be a problem but I can't find an elegant solution to this.

Thanks in advance.

EDIT:

I include the JS related code pretty simplified:

entry.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function(){
            var json = {
                'foo': 1,
                'bar': 2
            }
            $.ajax('entry', {
                type: 'POST',
                data: JSON.stringify(json),
                contentType: 'application/json',
                success: function(data, textStatus, jqXHR){
                    console.log(data);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    console.log(errorThrown);
                }
            });
        });
    </script>
</body>
</html>

diary.html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var data = {{ data|safe }}
        console.log(data);
    </script>
</body>
</html>

The behaviour noticed is that jinja template isn't returned, but the HTML page content in the success callback from the POST ajax request:

Chrome dev tools shot

I'd like to render the new template with the retrieved data after this POST request (done via Ajax).

like image 985
jarandaf Avatar asked Apr 01 '14 15:04

jarandaf


1 Answers

this will help you

!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(function(){
                var json = {
                    'foo': 1,
                    'bar': 2
                }
                $.ajax('entry', {
                    url='type url here',
                    type: 'POST',
                    dataType='json',
                    data: JSON.stringify(json),
                    contentType: 'application/json',
                    success: function(data, textStatus, jqXHR){
                        console.log(data);
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        console.log(errorThrown);
                    }
                });
            });
        </script>
    </body>
    </html>

at back end receive data like this way

variable=request.get_json()

now variable is dict

I think this will help you

like image 129
iammehrabalam Avatar answered Nov 04 '22 09:11

iammehrabalam