Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
James Barrett
13,253 PointsWhat 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.
James Barrett
13,253 PointsHi! 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
16,642 PointsI'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
13,253 PointsOkay I understand. Thanks Oliver. :)
2 Answers
Oliver Duncan
16,642 PointsI 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
13,253 PointsHi! 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
12,248 PointsThe 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.
Jesus Mendoza
23,289 PointsJesus Mendoza
23,289 PointsSerialize() 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