Μέθοδοι Αποστολής Φορμών σε JavaScript

Οι φόρμες μπορούν να αποσταλούν με δύο τρόπους: με τη μέθοδο GET ή τη μέθοδο POST. Ο τρόπος αποστολής της φόρμας ρυθμίζεται από το χαρακτηριστικό method της φόρμας.

Για παράδειγμα, ας ορίσουμε για τη φόρμα τη μέθοδο αποστολής GET:

<form action="/handler/" method="GET">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Και τώρα η μέθοδος POST:

<form action="/handler/" method="POST">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Ας δούμε τώρα ποια είναι η διαφορά μεταξύ των δύο μεθόδων αποστολής. Στην περίπτωση της μεθόδου GET τα δεδομένα της φόρμας θα είναι ορατά στο πρόγραμμα περιήγησης με τη μορφή της λεγόμενης συμβολοσειράς παραμέτρων (query string), που αντιπροσωπεύει ζεύγη της μορφής κλειδί-τιμή, όπου κλειδί θα είναι το όνομα του στοιχείου της φόρμας και τιμή - τα δεδομένα που εισήχθησαν σε αυτό. Σε αυτή την περίπτωση, τα ζεύγη τιμών θα είναι χωρισμένα με συμβολοσειρές (&).

Τα δεδομένα που αποστέλλονται με τη μέθοδο GET θα μπουν στον διακομιστή μας στην ιδιότητα get του αντικειμένου με δεδομένα:

export default {
	'/handler/': function(data) {
		console.log(data.get); // θα εμφανιστεί στην κονσόλα του διακομιστή
		return 'τα δεδομένα της φόρμας ελήφθησαν';
	}
}

Και τα δεδομένα που αποστέλλονται με τη μέθοδο POST θα μπουν στον διακομιστή μας στην ιδιότητα post του αντικειμένου με δεδομένα:

export default {
	'/handler/': function(data) {
		console.log(data.post); // θα εμφανιστεί στην κονσόλα του διακομιστή
		return 'τα δεδομένα της φόρμας ελήφθησαν';
	}
}

Για συντομία, μπορείτε να εκτελέσετε αποσύνθεση (destructuring), για να λάβετε τα δεδομένα μας σε μια ξεχωριστή μεταβλητή:

export default {
	'/handler/': function({get, post}) {
		console.log(get);
		console.log(post);
		return 'τα δεδομένα της φόρμας ελήφθησαν';
	}
}