Vorms stuur in JavaScript

Jy kan reeds met vormelemente werk in JavaScript deur hulle in die blaaier te verwerk. Vorms kan egter ook na die bediener gestuur word sodat die bedienerkant van die webwerf, geskryf in PHP of NodeJS, dit kan verwerk.

Dit is nodig om data by die webwerf te voeg of te verander, wat op die bediener gestoor word.

Kom ons kyk hoe dit gedoen word. Laat ons sê ons het 'n paar insette en 'n knoppie:

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

Laat ons ons elemente in die form-tag wikkel. In hierdie geval sal ons 'n vorm hê wat met die druk van die knoppie na die bediener gestuur sal word:

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

Sodat data op die bediener verkry kan word, moet elke inset sy eie naam kry:

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

In hierdie geval sal die vormdata na die bediener kom in die vorm van sleutel-waarde-pare, waar die sleutels die naam van die vormelemente is, en die waardes die ingevoerde data.

Om die vorm te stuur, is 'n bediener nie nodig nie. Jy kan die gegewe vormkode in enige lêer kopieer, dit in die blaaier laat hardloop en op die stuurknoppie druk - die vorm sal gestuur word en die blaaierblad sal herlaai.

Sonder 'n bediener sal die data egter nêrens beland nie. Laat ons dus die vorm se werking saam met 'n bediener toets. Vir nou ken jy nog geen bediener-tale nie, so laat ons oefen om die vorm te stuur met ons leer HTTP-bediener.

Laat ons ons vorm in 'n sekere lêer plaas sodat dit beskikbaar is by die adres http://localhost:3001/form.html:

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

Laat ons die action-kenmerk by ons vorm voeg, wat die adres wys waarheen ons vorm gestuur moet word:

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

Skryf nou in die lêer server.js 'n verwerker vir die vormstuur-adres:

export default {
	'/handler/': function() {
		return 'vorm data ontvang';
	}
}

Die gestuurde vormdata sal in die parameter van ons verwerker beland:

export default {
	'/handler/': function(data) {
		console.log(data); // sal in die bediener se konsole vertoon word
		return 'vorm data ontvang';
	}
}

Skep 'n vorm en 'n lêer om dit te verwerk. Stuur die vorm en kontroleer dat die data wel by die bediener aangekom het.