Kutuma Fomu katika JavaScript

Tayari unajua kufanya kazi na vipengele vya fomu katika JavaScript, ukivishughulikia kwenye kivinjari. Hata hivyo, fomu zinaweza pia kutumwa kwa seva, ili zishughulikiwe na sehemu ya seva ya tovuti, iliyoandikwa kwa PHP au NodeJS.

Hii inahitajika ili kuongeza na kubadilisha data ya tovuti, inayohifadhiwa kwenye seva.

Wacha tuangalie jinsi hii inafanyika. Hebu tuwache tunayo viingilio kadhaa na kifungo:

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

Wacha tuzizungushe vipengele vyetu kwenye kitambulisho form. Katika kesi hii, tutapata fomu, ambayo kwa kubonyeza kifungo itatumwa kwa seva:

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

Ili seva iweze kupata data ya fomu, ni muhimu kukipa kila kiingilio jina lake:

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

Katika kesi hii, data ya fomu itafika kwenye seva katika mfumo wa jozi ufunguo-thamani, ambapo funguo zitakuwa majina ya vipengele vya fomu, na maadili yatakuwa data iliyoingizwa.

Ili kutuma fomu, hakuna haja ya seva. Unaweza kunakili msimbo uliopewa wa fomu kwa faili yoyote, kuifungua kwenye kivinjari na kubonyeza kifungo cha kutuma - fomu itatumwa na ukurasa wa kivinjari upya upya.

Hata hivyo, kukosekana kwa seva, data ya fomu haitafika popote. Kwa hivyo hebu tufanye kazi ya fomu pamoja na seva. Kwa sasa hujui lugha zozote za seva, kwa hivyo hebu tujizoeze kutuma fomu kwa kutumia kivinjari chetu cha kielimu cha HTTP.

Wacha tuweke fomu yetu kwenye faili fulani ili iwe patikana kwa anwani http://localhost:3001/form.html:

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

Wacha tuongeze kipengele action kwenye fomu yetu, kinachoonyesha anwani ya kutuma fomu yetu:

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

Sasa kwenye faili server.js tuandike kishughulizi cha anwani ya kutuma fomu:

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

Kigezo cha kishughulizi chetu kitaingiza data iliyotumwa ya fomu:

export default {
	'/handler/': function(data) {
		console.log(data); // itaonyeshwa kwenye konsoli ya seva
		return 'form data received';
	}
}

Unda fomu na faili ya kuitayarisha. Tuma fomu na uhakikishe kuwa data kwa hakika imefika kwenye seva.