Flask: POST request using AJAX

Question

I want to make a post request by using ajax. I want to use the input value as function parameter and append the function return into a html table. I don't know but a think that my code is wrong and the ajax is not working.

Note: For testing, I'm taking input value and returning to html page.

network.html

    <script type="text/javascript">
       $(function(){
         $('#button').click(function(){
            var dados = $('#search-input').val();
            $.ajax({
                url: '/network',
                data: $('form').serialize(),
                type: 'POST',
                success: function(data){
                    $('#result').append(data)
                    console.log(data);
                },
                error: function(error){
                    console.log(error);
                }   
            });
         });
       });
     </script>

     <form name='form' method="POST">
                <input type="text" name="search-input" id="search-input" class="form-control" placeholder="Users and ID" >   
<button type="submit" class="btn btn-primary" id="button">Search</button>
            </form>
            <span id=result>{% print dado %}</span>

app.py

@app.route('/network',methods=['POST','GET'])
def network():
    if request.method == 'POST':
     input = request.form['search-input']       
     return render_template('network.html',dado=input)
    else:
      return render_template('network.html',dado='')

Edit: After this update what's returning is a JSON format

{
  "dado": "INPUT VALUE"
}

app.py

@app.route('/network',methods=['POST','GET'])
def network():
    if request.method == 'POST':
     input = request.form['search-input']       
     return jsonify(dado=input)
    else:
      return render_template('network.html',dado='')

network.html

  <script type="text/javascript">
   $(function(){
     $('#botao').click(function(){
        var dados = $('#search-input').val();
        $.ajax({
            url: "{{ url_for('network') }}",
            data: JSON.stringify(dados),
            contentType: 'application/json;charset=UTF-8',
            type: 'POST',
            success: function(data){
                $('#result').append(data["dado"])
                console.log(data);
            },
            error: function(error){
                console.log(error);
            }   
        });
     });
   });
 </script>

Possible duplicate of how can I use data posted from ajax in flask? — Knocktorius Maxima
– Knocktorius Maxima, Commented Mar 22, 2018 at 10:01

Daniel da Rocha · Accepted Answer · 2018-03-22 23:35:26Z

1

You got to return JSON! Instead of return render_template(...), use:

return jsonify(dado = input)

Then in your ajax success call:

success: function(data){
    $('#result').append(data["dado"])
    console.log(data);
}
...
}); // end AJAX
e.preventDefault();

Don't forget to import jsonify

from flask import jsonify

edited Mar 22, 2018 at 23:35

answered Mar 22, 2018 at 8:04

Daniel da Rocha

94713 silver badges26 bronze badges

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

2 Comments

Shinomoto Asakura Over a year ago

I updated my question with the adjusts, but it's not appending the data, just return a blank page with json format

Daniel da Rocha Over a year ago

I edited the answer, try adding e.preventDefault(); after the ajax call, which blocks the traditional submission of the form.

Collectives™ on Stack Overflow

Flask: POST request using AJAX

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related