Sending skjemaer i JavaScript

Du kan allerede jobbe med skjemaelementer i JavaScript, ved å behandle dem i nettleseren. Skjemaer kan imidlertid også sendes til serveren, slik at serverdelen av nettstedet, skrevet i PHP eller NodeJS, kan behandle dem.

Dette er nødvendig for å legge til og endre nettstedets data, som er lagret på serveren.

La oss se hvordan dette gjøres. La oss si at vi har noen inndatafelt og en knapp:

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

La oss omslutte elementene våre med form-taggen. I dette tilfellet får vi et skjema som vil bli sendt til serveren når knappen trykkes:

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

For at serveren skal kunne motta dataene fra skjemaet, er det nødvendig å gi hvert inndatafelt sitt eget navn:

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

I dette tilfellet vil skjemadataene ankomme til serveren i form av nøkkel-verdi-par, hvor nøklene vil være navnene på skjemaelementene, og verdiene vil være de innsendte dataene.

For å sende skjemaet, er det ikke nødvendig med en server. Du kan kopiere den gitte skjemakoden til en hvilken som helst fil, åpne den i en nettleser og trykke på sendeknappen - skjemaet vil bli sendt og nettlesersiden vil lastes på nytt.

Uten en server, vil imidlertid skjemadataene ikke havne noe sted. Så la oss testere skjemafunksjonaliteten sammen med en server. Foreløpig kan du ikke noen server-språk, så la oss øve på å sende skjemaet med hjelp av vår lærings- HTTP-server.

La oss plassere skjemaet vårt i en fil slik at den er tilgjengelig på adressen http://localhost:3001/form.html:

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

La oss legge til action-attributtet til skjemaet vårt, som angir adressen skjemaet vårt skal sendes til:

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

La oss nå i filen server.js skrive en behandler for adressen skjemaet sendes til:

export default {
	'/handler/': function() {
		return 'skjemadata mottatt';
	}
}

De sendte skjemadataene vil bli sendt inn som en parameter til behandleren vår:

export default {
	'/handler/': function(data) {
		console.log(data); // vil skrives ut til serverkonsollen
		return 'skjemadata mottatt';
	}
}

Opprett et skjema og en fil for å behandle det. Send skjemaet og sjekk at dataene faktisk kom frem til serveren.