0

I'm trying to send a form using Ajax as JSON to a flask server, the problem is that the shape of the request I got on the server is strange. I'm following this answer and my code is as follows:

Form

<form action="/Go" role="form" method="post" id="myForm">
    <div class="form-group">
        <input autofocus class="form-control" id="fname" name="fname" placeholder="First Name" required type="text" value="">
    </div>

    <div class="form-group">
        <input class="form-control" id="lname" name="lname" placeholder="Last Name" required type="text" value="">
    </div>

    <div class="form-group">
        <input class="form-control" id="age" name="age" placeholder="Your Age" required type="text" value="">
    </div>

    <div class="form-group">
        <input class="form-control" id="height" name="height" placeholder="What is your height" type="text" value="">
    </div>

    <div class="modal-footer shorten-form">
        <button type="button" class="btn btn-secondary">Close</button>
        <button type="submit" class="btn btn-primary">Create</button>
    </div>
</form>

Jquery

$.ajax({
    type: "POST",
    url: "/Go",
    data: JSON.stringify($("form#myForm").serializeArray()),
    dataType:"json",
    contentType:"application/json",
    success: function (html, textStatus, jqXHR) {
        ...
    }
});

Now using request.get_json() on the server and printing the result appears to be like this:

[{'name': 'fname', 'value': 'Shadow'}, {'name': 'lname', 'value': 'fax'}, {'name': 'age', 'value': '12'}, {'name': 'height', 'value': ''}]

While I'm expecting something like this:

{'fname': 'Shodow', 'lname': 'fax', 'age': '12', 'height': ''}

What am I doing wrong?

Shadowfax
  • 556
  • 2
  • 13
  • 1
    Can you also inculde the general structure of your form? – keysl Sep 03 '19 at 06:28
  • It would be useful to inspect the data you're sending before sending it – peeebeee Sep 03 '19 at 06:32
  • @keysl Updated the question – Shadowfax Sep 03 '19 at 06:33
  • @peeebeee I inspected the request in Firefox and it is sent as it appears on the server, in a list with names and values – Shadowfax Sep 03 '19 at 06:35
  • 1
    You're not doing anything wrong. This is how `.serializeArray()` works, compare [the docs](https://api.jquery.com/serializeArray/). If you want name-value pairs, sending JSON has no benefit. Just to a regular form POST (use `.serialize()` and don't set the content-type to JSON), I'm sure Flask will turn that into exactly what you expect. – Tomalak Sep 03 '19 at 06:36
  • Possible duplicate of [Convert form data to JavaScript object with jQuery](https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery) – Nick Sep 03 '19 at 06:37
  • You can also transform the object before sending it to the server, or transform it after receiving it on the server, but it's really not worth the hassle. Think about *why* you want to use JSON format here in the first place and if there is any benefit beyond "it feels more modern". In the end you're sending *a string* to the server, whether it is JSON format or URL-encoded format is completely irrelevant. When there are two options to come to the same result, pick the simpler one. – Tomalak Sep 03 '19 at 06:43
  • @keysl when inspecting the request in Firefox, the parameters are sent as i want, but the problem is that at the server i must use `request.get_json()` since there's another applications using the API and they send the request as JSON. `request.get_json()` returns None if i did what you said. – Shadowfax Sep 03 '19 at 06:48

0 Answers0