Αποστολή Φορμών σε JavaScript

Ήδη γνωρίζετε πώς να εργάζεστε με στοιχεία φορμών σε JavaScript, επεξεργαζόμενα αυτά στο πρόγραμμα περιήγησης. Οι φόρμες, ωστόσο, μπορούν επίσης να αποσταλούν στον διακομιστή για να τις επεξεργαστεί το server-side μέρος του ιστότοπου, γραμμένο σε PHP ή NodeJS.

Αυτό είναι απαραίτητο για να προσθέτουμε και να αλλάζουμε τα δεδομένα του ιστότοπου, που αποθηκεύονται στο διακομιστή.

Ας δούμε πώς γίνεται αυτό. Ας υποθέσουμε ότι έχουμε πολλά πεδία εισαγωγής και ένα κουμπί:

<input>
<input>
<input type="submit">

Ας τυλίξουμε τα στοιχεία μας στην ετικέτα form. Σε αυτήν την περίπτωση, θα έχουμε μια φόρμα που με το πάτημα στο κουμπί θα αποστέλλεται στον διακομιστή:

<form>
	<input>
	<input>
	<input type="submit">
</form>

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

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Σε αυτήν την περίπτωση, τα δεδομένα της φόρμας θα φτάσουν στον διακομιστή με τη μορφή ζευγών κλειδί-τιμή, όπου τα κλειδιά θα είναι τα ονόματα των στοιχείων της φόρμας και οι τιμές - τα δεδομένα που εισήχθησαν.

Για να στείλετε τη φόρμα, δεν απαιτείται διακομιστής. Μπορείτε να αντιγράψετε τον παρεχόμενο κώδικα φόρμας σε οποιοδήποτε αρχείο, να τον εκτελέσετε στο πρόγραμμα περιήγησης και να πατήσετε στο κουμπί αποστολής - η φόρμα θα σταλεί και η σελίδα του προγράμματος περιήγησης θα φορτωθεί ξανά.

Χωρίς την παρουσία διακομιστή, ωστόσο, τα δεδομένα της φόρμας δεν θα πάνε πουθενά. Επομένως, ας ελέγξουμε τη λειτουργία της φόρμας μαζί με έναν διακομιστή. Προς το παρόν δεν γνωρίζετε καμία server-side γλώσσα, οπότε ας εξασκηθούμε στην αποστολή φόρμας χρησιμοποιώντας τον εκπαιδευτικό μας HTTP διακομιστή.

Ας τοποθετήσουμε τη φόρμα μας σε κάποιο αρχείο έτσι ώστε να είναι προσβάσιμη στη διεύθυνση http://localhost:3001/form.html:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Ας προσθέσουμε στη φόρμα μας το χαρακτηριστικό action, που υποδεικνύει τη διεύθυνση αποστολής της φόρμας μας:

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

Τώρα στο αρχείο server.js ας γράψουμε έναν χειριστή της διεύθυνσης αποστολής της φόρμας:

export default {
	'/handler/': function() {
		return 'form data received';
	}
}

Στην παράμετρο του χειριστή μας θα φτάσουν τα δεδομένα της φόρμας που στάλθηκαν:

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

Δημιουργήστε μια φόρμα και ένα αρχείο για την επεξεργασία της. Στείλτε τη φόρμα και ελέγξτε ότι τα δεδομένα πράγματι έφτασαν στο διακομιστή.