ფორმების გაგზავნა JavaScript-ში

თქვენ უკვე იცით როგორ იმუშაოთ ფორმების ელემენტებთან JavaScript-ში, მათი დამუშავება ბრაუზერში. თუმცა, ფორმები ასევე შეიძლება გაიგზავნოს სერვერზე, რათა მათ დაამუშავოს საიტის სერვერული ნაწილი, დაწერილი 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>

ამ შემთხვევაში სერვერზე ფორმის მონაცემები მოვა გასაღები-მნიშვნელობა წყვილების სახით, სადაც გასაღებები იქნება ფორმის ელემენტების სახელები, ხოლო მნიშვნელობები - შეყვანილი მონაცემები.

ფორმის გასაგზავნად, სერვერი არ არის აუცილებელი. თქვენ შეგიძლიათ ფორმის მოცემული კოდი კოპირება გაუკეთოთ ნებისმიერ ფაილს, გაუშვათ ის ბრაუზერში და დააჭიროთ გაგზავნის ღილაკს - ფორმა გაიგზავნება და ბრაუზერის გვერდი განახლდება.

სერვერის არარსებობის შემთხვევაში, ფორმის მონაცემები ჩვეულებრივ, ვერსად არ მოხვდება. ამიტომ მოდით შევამოწმოთ ფორმის მუშაობა სერვერთან ერთად. ახლა თქვენ არ იცით სერვერული ენები, ამიტომ ვივარჯიშოთ ფორმის გაგზავნა ჩვენი სასწავლო 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';
	}
}

შექმენით ფორმა და ფაილი მისი დასამუშავებლად. გაგზავნეთ ფორმა და შეამოწმეთ, რომ მონაცემები ნამდვილად ჩამოვიდა სერვერზე.