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?](https://stackoverflow.com/questions/14908864/how-can-i-use-data-posted-from-ajax-in-flask) — Knocktorius Maxima, Mar 22 '18 at 10:01

Daniel da Rocha · Accepted Answer · 2018-03-22T23:35:26.757

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 '18 at 23:35

answered Mar 22 '18 at 08:04

Daniel da Rocha

887
13
26

I updated my question with the adjusts, but it's not appending the data, just return a blank page with json format – Shinomoto Asakura Mar 22 '18 at 18:23
I edited the answer, try adding `e.preventDefault();` after the ajax call, which blocks the traditional submission of the form. – Daniel da Rocha Mar 22 '18 at 23:36

Flask: POST request using AJAX

1 Answers1