Buy
Buy

POSTing to the API Endpoint

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Before we keep going, I want to go back and look at what it used to look like when we submitted the form. I have not refreshed yet, and this AJAX call is an example of what the POST request looked like using our old code.

Click that AJAX call and move to the "Headers" tab. When we sent the AJAX call before, what did our request look like? At the bottom, you'll see "Form Data". But more interestingly, if you click "View Source", it shows you the raw request body that we sent. It's this weird-looking, almost query-string format, with & and = between fields.

This is the traditional form submit format for the web, a data format called application/x-www-form-urlencoded, if you want to get dorky about it. When you submit a normal HTML form, the data is sent like this. In PHP, that data is parsed into the familiar $_POST variable. We don't realize that it originally looked like this, because PHP gives us that nice associative array.

I wanted to show this because we are not going to send data in this format. Remember, our endpoint expects pure JSON. So $form.serialize() is not going to work anymore.

Instead, above the AJAX call, create a new formData variable set to an associative array, or an object:

... lines 1 - 2
(function(window, $) {
... lines 4 - 24
$.extend(window.RepLogApp.prototype, {
... lines 26 - 61
handleNewFormSubmit: function(e) {
... lines 63 - 64
var $form = $(e.currentTarget);
var formData = {};
... lines 67 - 82
}
});
... lines 85 - 102
})(window, jQuery);

Next, use $.each($form.serializeArray()):

... lines 1 - 2
(function(window, $) {
... lines 4 - 24
$.extend(window.RepLogApp.prototype, {
... lines 26 - 61
handleNewFormSubmit: function(e) {
... lines 63 - 65
var formData = {};
$.each($form.serializeArray(), function(key, fieldData) {
... line 68
});
... lines 70 - 82
}
});
... lines 85 - 102
})(window, jQuery);

If you Google for that function - jQuery serializeArray() - you'll see that it finds all the fields in a form and returns a big array with keys name and value for each field.

This is not exactly what we want: we want an array where the name is the array key and that field's value is its value. No problem, because we can loop over this and turn it into that format. Add a function with key and fieldData arguments. Then inside, simply say, formData[fieldData.name] = fieldData.value:

... lines 1 - 2
(function(window, $) {
... lines 4 - 24
$.extend(window.RepLogApp.prototype, {
... lines 26 - 61
handleNewFormSubmit: function(e) {
... lines 63 - 65
var formData = {};
$.each($form.serializeArray(), function(key, fieldData) {
formData[fieldData.name] = fieldData.value
});
... lines 70 - 82
}
});
... lines 85 - 102
})(window, jQuery);

Now that formData has the right format, turn it into JSON with JSON.stringify(formData):

... lines 1 - 2
(function(window, $) {
... lines 4 - 24
$.extend(window.RepLogApp.prototype, {
... lines 26 - 61
handleNewFormSubmit: function(e) {
... lines 63 - 65
var formData = {};
$.each($form.serializeArray(), function(key, fieldData) {
formData[fieldData.name] = fieldData.value
});
$.ajax({
... lines 71 - 72
data: JSON.stringify(formData),
... lines 74 - 81
});
}
});
... lines 85 - 102
})(window, jQuery);

Remember, we're doing this because that's what our endpoint expects: it will json_decode() the request body.

Ok, moment of truth. Refresh! Let's lift our laptop 10 times. Submit! Of course, nothing on the page changes, but we do have a successful POST request! Check out the response: id, item, label, reps and totalWeightLifted. Cool!

Also check out the "Headers" section again and find the request body at the bottom. It's now pure JSON: you can see the difference between our old request format and this new one.

Ok! It's time to get to work on our UI: we need to start processing the JSON response to add errors to our form and dynamically add a new row on success.

Leave a comment!

  • 2018-12-20 Diego Aguiar

    Cool, thanks for sharing it :)

  • 2018-12-20 Jacobo Quiles

    Thank you Diego, but the problem is that the ajax endpoint is expecting a json encoded string, not serialized data. I think I found a solution, I will write it here in case someone else needs it:


    handleNewFormSubmit: function(e) {
    e.preventDefault();

    var $form = $(e.currentTarget);
    var formData = {};

    $.each($form.serializeArray(), function(key, fieldData) {
    if (fieldData.name.indexOf("[]") > 0) {
    formData[fieldData.name.replace('[]', '')] = $form.find('select[name="'+fieldData.name+'"]').val();
    } else {
    formData[fieldData.name] = encodeURIComponent(fieldData.value);
    }
    });

    var self = this;
    this._saveIssuingEntity(formData)
    .then(function(data) {
    self._clearForm();
    self._addRow(data);
    }).catch(function(errorData) {
    self._mapErrorsToForm(errorData.errors);
    });
    }

    For sure it could be more efficient, but this just works. Thanks!

  • 2018-12-19 Diego Aguiar

    Hey Jacobo Quiles

    Sorry for the late reply. I found a way to get all selected items via JQuery: https://stackoverflow.com/a...
    and there is even a pure JS example if you scroll down a little bit.
    Here is an example of how to serialize the select data and send it via AJAX: https://stackoverflow.com/a...

    About "The form should not contain extra fields" problem, I believe somehow your form contains extra fields when you serialize it, try dumping it and check which fields you are actually passing in.

    Cheers!

  • 2018-12-19 Jacobo Quiles

    Anyone?

  • 2018-12-14 Jacobo Quiles

    Hi, I have a problem when trying to prepare the form data to serializeArray. My form contains fields that are type select multiple:

    $builder->add('vatTypes', EntityType::class, array( 'class' => VatType::class,
    'multiple' => true,

    ...

    'attr' => ['class' => 'form-control select2']));

    So when I get to:

    $.each($form.serializeArray(), function(key, fieldData) {
    ...

    I get "fieldName[]"=3 where 3 is the last selected value, but it is missing all the other options. How can this be done? So the Json can parse the multiple select?

    Also, when the form is sent it complains about "The form should not contain extra fields" which I think it is maybe related to this problem, not sure though...

    Any guidance will be really appreciated.

    Thanks!