JavaScript AJAX Basics (retiring) jQuery and AJAX Posting Data with jQuery

James Barrett
James Barrett
13,253 Points

What would happen if serialize() was not included in this code snippet?

Hi there,

Dave uses this code snippet:

$('form).submit(function(evt) {
 evt.preventDefault // Prevents default behaviour of an element
 var url = $(this).attr("action"); // Captures the form's action attribute (e.g. process.php)
 var formData = $(this).serialize(); // Serialize 
    });
 });

And features a line I have not quite wrapped my head around:

 var formData = $(this).serialize();

What would happen if we didn't include this line of code? Also how does the form data go to the server without sending it through a query string like we do for the GET method? Does this line of code help with that?

Thanks, James.

Jesus Mendoza
Jesus Mendoza
23,266 Points

Serialize() transforms the content of your form into a string so it can be send thru the url to the server. Do console.log(formData); and take a look at the format

James Barrett
James Barrett
13,253 Points

Hi! Thanks for the reply. One other thing I am confused about is why it is sent through the URL. I thought it was bad practice to POST sensitive information through a URL?

Thanks, James.

Oliver Duncan
Oliver Duncan
16,639 Points

I'm not quite sure what you mean, James. A POST request sends data in the body of the request, while a GET request sends it in the url in the form of a query string. Using $.post will therefore send a request with your form info in the body of the request, not in the URL. The reason why you wouldn't want to use a GET request to submit sensitive information is that it's there for all to see in the URL, in the form of a query string.

James Barrett
James Barrett
13,253 Points

Okay I understand. Thanks Oliver. :)

2 Answers

Oliver Duncan
Oliver Duncan
16,639 Points

I could be mistaken, but I think jQuery's serialize() method parses a form's input data into a string of key value pairs. Try looking it up in the jQuery docs.

An easy way to see what's going on is to log the serialized data to the console:

console.log(formData)

If you didn't use serialize(), you could either parse the information yourself by accessing each text input's value and creating your own custom object, or rely on HTML's built in form submission functionality. Without these methods, you would have no organized data to encode to a query string or what have you.

As to your other question, at this point in the code, I don't believe the form has been submitted. You would need to use one of jQuery's AJAX methods to do that, i.e

//POST method
$.post(formData)
//GET method
$.get(formData)

Edit: Updated answer to reflect Jesus' helpful comment - serialize() encodes data into a string.

James Barrett
James Barrett
13,253 Points

Hi! Thanks for the reply. One other thing I am confused about is why it is sent through the URL. I thought it was bad practice to POST sensitive information through a URL?

Thanks, James.

Todd MacIntyre
Todd MacIntyre
12,247 Points

The POST method does NOT send its data through the URL (unlike the GET method). The query string (name/value pairs) is sent in the HTTP message body of a POST request.