Jquery/Ajax form POST submits empty to my API

Question

I'm having some issues using Jquery & Ajax to submit a form to my API that is powered by Flask-RestPlus & Python. When I run my API from CURL, or using swagger it works as predicted, however when I try to use Jquery/Ajax to submit a form to the same endpoint I am not getting any data from the form submission.

Here is the the HTML/Jquery

<form name="login" id="login">
<input type="text" name="email" id="email">
<input type="password" name="password" id="password">
<button type="submit">Submit</button>
</form>

</body>
<script>
$("#login").submit(function(e) {

    var url = "/auth/login_user"; //

    $.ajax({
           type: "POST",
           url: url,
           data: $("#login").serializeArray(), // I've tried serializeArray() & serialize()
           success: function(data)
           {
               alert(data);
           }
         });

    e.preventDefault(); 
});
</script>

When I inspect the code inside the browser it looks like it is sending the form data, but when I print it in my console from my python function I can tell I am getting a None type.

Any help would be much appreciated. I know I can user Jquery.val() to get the value of each form element but it doesn't seem like the correct way to solve this issue.

You should be using serialize() and code looks correct, how is the php reading it? — epascarello, Dec 27 '17 at 20:37
I'm using python for the processing side. When I look at what should be the form data inside the python console it is coming over as 'None'. I need it to come over as a JSON response.. so { email: string, password: string } — Christopher Nelson, Dec 27 '17 at 20:45
well if you want JSON, than you do not want searlize() and searlizeArray() — epascarello, Dec 27 '17 at 20:50
https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery — epascarello, Dec 27 '17 at 20:53
You could always construct the JSON object yourself, setting each key to Jquery.val(). You'd also need to declare the contentType. Set this to `'application/json'`.Then back in Flask, you can parse this with `request.json['email']` and `request.json['password']` — Mangohero1, Dec 27 '17 at 20:58
Yeah I'm trying that now but I'm getting a failed to decode json object. I imagine it's because I'm using Flask-RestPlus.. I'm not sure what could be going on tho, because the API endpoint works fine when sending raw json. But this form is not. — Christopher Nelson, Dec 27 '17 at 21:13
Ah, that could be it. sadly I'm not familiar with Flask-RestPlus — Mangohero1, Dec 27 '17 at 21:15

score 0 · Accepted Answer · answered Dec 27 '17 at 21:43

For anyone with this issue.. It seems to be the way Flask-RestPlus/Flask takes in the ajax POST. Not sure exactly what was going on but I did figure out the way around this by using this Jquery lib; https://github.com/marioizquierdo/jquery.serializeJSON

and my code like so..

    <script>
$("#login").submit(function(e) {

    var url = "/auth/login_user";
    var form_data = $('#login').serializeJSON();

    console.log(form_data)

    $.ajax({
           type: "POST",
           url: url,
           contentType: 'application/JSON',
           data: JSON.stringify(form_data),
           success: function(data)
           {
               alert(data); // 
           }
         });

    e.preventDefault(); 
});
</script>

Jquery/Ajax form POST submits empty to my API

1 Answers1