Skicka formulär i JavaScript

Du kan redan arbeta med formulärelement i JavaScript och hantera dem i webbläsaren. Formulär kan dock också skickas till servern så att de kan hanteras av webbplatsens serversida, skriven i PHP eller NodeJS.

Detta behövs för att lägga till och ändra webbplatsdata som lagras på servern.

Låt oss se hur det går till. Låt oss säga att vi har några inmatningsfält och en knapp:

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

Låt oss omsluta våra element med taggen form. I så fall får vi ett formulär som skickas till servern när knappen trycks:

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

För att servern ska kunna ta emot data från formuläret måste varje inmatningsfält få ett eget namn:

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

I detta fall kommer formulärdatan till servern i form av nyckel-värde-par, där nycklarna är formulärelementens namn och värdena är de inmatade uppgifterna.

För att skicka formuläret behövs ingen server. Du kan kopiera den angivna formulärkoden till vilken fil som helst, öppna den i en webbläsare och klicka på skickaknappen - formuläret skickas och webbläsarsidan laddas om.

Utan en server kommer dock formulärdatan inte att hamna någonstans. Så låt oss testa formulärets funktionalitet tillsammans med en server. Just nu kan du inga serverspråk, så låt oss öva på att skicka formuläret med hjälp av vår utbildningsmässiga HTTP-server.

Låt oss placera vårt formulär i en fil så att den är tillgänglig på adressen http://localhost:3001/form.html:

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

Låt oss lägga till attributet action till vårt formulär, som anger adressen dit vårt formulär ska skickas:

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

Nu skriver vi en hanterare för formulärets adress i filen server.js:

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

Parametern till vår hanterare kommer att ta emot de skickade formulärsuppgifterna:

export default {
	'/handler/': function(data) {
		console.log(data); // kommer att visas i serverkonsolen
		return 'form data received';
	}
}

Skapa ett formulär och en fil för att hantera det. Skicka formuläret och kontrollera att datan verkligen kommit till servern.