ajax json post request to flask

Question

I am struggling to send a ajax post request but cannot figure out where i am going wrong, i have this form which i submit with js and along with that form i want to send the id of a div:

<script type="text/javascript">
      $(document).ready(function() {
        $('input[type=radio]').on('change', function() {
            $(this).closest("form").submit();
            var poll_id = $(this).closest("div").attr("id");
            var data = {poll_id};
            console.log(JSON.stringify(data));
            $.ajax({
                url: '/poll',
                type: 'POST',
                data: JSON.stringify(data),
                contentType: 'application/json',
                dataType: 'json'
              }, function(data) {
                  console.log(data);
                });
          });
    });
    </script>

and in flask i try to request it with request.get_json() but keep getting error 400, the form and db.commit() works fine:

@app.route('/poll', methods=['GET', 'POST'])
def poll():
    polltodb = pollingresult(request.form['points'])
    session['points_session'] = request.form['points']
    db.session.add(polltodb)
    db.session.commit()
    data = request.get_json()
    print data

but the get_json() fails.

abigperson · Accepted Answer · 2016-12-10 18:04:33Z

1

$(this).closest("form").submit(); tells your html page to submit the form. If any javascript after that line even executes you'd be making a separate XHR request (e.g. 2 requests, the data would never be in the same request using this approach). To accomplish what you're trying to do I'd take a different approach:

Add a hidden element to your form. e.g. <input type="hidden" name="poll_id" id="myHiddenField">

Update your javascript:

<script type="text/javascript">

(function(){
   $('input[type=radio]').on('change', function () {
        $('#myHiddenField').val($(this).closest("div").attr("id"));
        $(this).closest("form").submit();
    });
});

</script>

Then, access the data through the form as you normally would and don't worry about get_json()

edited Dec 10, 2016 at 18:04

answered Dec 9, 2016 at 22:38

abigperson

5,3823 gold badges25 silver badges25 bronze badges

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

2 Comments

destinychoice Over a year ago

It's never possible to make 2 requests? with the approach I first tried

abigperson Over a year ago

It's definitely possible to make 2 requests, but once you make a GET or POST request (e.g. submit a form or tell the browser to go to a new page) then any outstanding XHR request (e.g. AJAX) has no place to return to.

Collectives™ on Stack Overflow

ajax json post request to flask

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related