Different approaches to submitting forms with Ajax

Question

Hi!

In the past whilst working with AJAX-submitted forms, I have always created the forms in HTML and used the forms own POST function to submitting the actual data to a specific url. - This far is everything is the same as any non-AJAX form.

From that point I have used the jQuery Form plugin together with some basic jQuery code to remove the forms default action (to send the visitor to the form URL) and instead submit the form like a AJAX POST request, that also would return any output from the specific form action URL to the user.

While trying to learn more about JSON and other (to me unknown) javascript/ajax techonologies, I have found out that some people prefer to manually, by code, collect all form values from inside a form or other element on a page, serialize/json_encode the data and then use the same AJAX post-method as I have used to submit the data to submit it to a wanted page.

Why is that? Are there any pros included in sending JSON encoded data requests forwards and backwards instead of doing it the way I've learnt to do it (pure POST data)?

One of the reference videos that i noticed this approach: - http://www.youtube.com/watch?v=AiqdLYKkEfM&feature=player_embedded

Jquery form plugin: - http://jquery.malsup.com/form/

Thanks a lot!

Answer 1

Json data are structured and can be parsed easier than URL encoded strings. So, if you need to send structured data with your form, then it makes sense to convert them to Json. Many server technologies now support the creation of Json services, that can be directly consumed by a jQuery client.

If you only need to post simple data, then there is no need to do a Json conversion.