tutorial - รับค่าข้อมูลทาง POST & GET กับ Node.js

|


หลังจากที่บทความแรกปล่อยออกไป ก็อยากจะเขียนบทความที่สองขึ้นมาทันที (เห่อสินะ) ฮะๆ เข้าเรื่องๆ

วันนี้จะมายกตัวอย่างหรือวิธีการรับค่าข้อมูล post & get นะครับว่าทำ อะไร ยังไง เช่นเดิมครับผู้เขียนไม่ใช่ผู้เชี่ยวชาญแต่อย่างใดเลยอ่านๆจากหนังสือจากกูเกิ้ลมานี่แหละครับ ถ้าผิดพลาดอะไรยังไงก็ต้องขอโทษด้วยนะครับ : D (เขียนเอามันส์จริงๆ) มาๆ เริ่มๆเข้าเรื่องกันเถิดครับ

เริ่มจากการรับข้อมูลผ่านทาง GET (เรียกง่ายๆก็ส่งค่าข้อมูลผ่านทาง URL แหละครับ) ในที่นี้จะยกตัวอย่างและอธิบายให้ฟังดูนะครับ

เริ่มต้นก็ copy!! โค้ดกันเถิดครับ
Screen Shot 2556-08-10 at 12.10.27 PM

*สังเกตที่ Content-type : text/html ตรงนี้จะช่วยให้เราสามารถใช้ tag html มาแสดงผลได้ครับ แต่ในโค้ดตัวอย่างจะไม่มี tag html – ,- ไม่สามารถใส่ได้ แนะนำให้ดูจากในรูปนะครับ* 

เมื่อเสร็จแล้วก็รันเลยอย่ารีรอ – -, ฮะๆ ถ้าเราลองเข้าดูปกติ http://127.0.0.1:7777/ ก็จะยังไม่เห็นอะไรต่างแต่ถ้าเราเข้าด้วย http://127.0.0.1:7777/home/bedroom?action=sleep&who=me ก็จะมีการเปลี่ยนสังเกตจากรูปด้านล่าง

Screen Shot 2556-08-10 at 11.51.02 AMScreen Shot 2556-08-10 at 11.50.29 AM

จะเห็นว่า ตัวแปร req.url จะได้ข้อมูลทั้งหมดทาง url มาเลย (- -” และจะบอกว่านี่ละครับข้อมูล get ที่เหลือเราต้องมาแตกสตริงเอง – -” เข้าใจว่าน่ามี library ในส่วนไว้อำนวยความสะดวก ใครรู้ก็แนะนำทีนะครับ T,T)

และตัวแปร path จะมีเฉพาะ ส่วนเป็น path จะไม่มีข้อมูลที่เป็น get มาเกี่ยวข้อง

เท่านี้ละครับที่จะบอก : D ไปดูแบบ post กัน ต่อเลยดีกว่าา

ในตัวอย่างของ post นั้นเราจะให้ทางฝั่ง server ส่ง form มาให้เราโดยดูจากตัวแปร forminput จะเก็บ tag html ไว้ในนั้น มาว่าแล้วก็ มาเริ่มตัวอย่างนี้กันเลย

Screen Shot 2556-08-10 at 12.20.53 PM

*ขออภัยจริงๆไม่สามารถลง code ในนี้ได้เพราะเนื่องผมลงแล้วมันจะพัง – – tag html เศร้า(ใครมีวิธีดีๆมาแนะนำทีนะครับ)

พิมกันแล้วก็รันกันเลยอย่ารีรอเช่นเดิม ทีนี้เมื่อเราเข้าทาง browser ของเราก็จะเห็น form ง่ายๆกับ textbox มาให้ดังรูปพิมข้อความที่จะส่งรอได้เลย ฮะๆๆ รีบๆ

Screen Shot 2556-08-10 at 12.25.02 PM

ทีนี้ทำการทดลองกรอกข้อมูลแล้วกด submit กันได้เลยครับจะสังเกตเห็นว่า ฝั่ง server ได้รับข้อมูลและทำการ log ให้เราแล้ว

Screen Shot 2556-08-10 at 12.25.03 PM

หลายๆคนอาจจะสงสัยว่า O_O ทำงานยังไงฟะก็อบโค้ดมายัง งงๆ หรืออาจจะ error กันไปแล้วด้วยซํ้า – – ทีนี้ผมจะขออนุญาติอธิบาย code ที่ให้ท่านพิมกันไปนะครับ

ถ้าสงสัยตัวแปรตัวไหนทำอะไรยังไง ก็แนะนำให้ console.log ดูนะครับ ข้อมูล post  ที่ได้มาจะเหมือน get คือเป็นสตริงยาวๆต้องมานั่งแตกสตริงเอง(อย่างที่ใน log ของ server ในรูป*) – – แต่ที่นี้ผมมี function ซึ่งจะช่วยแปลง ข้อมูลนั้นมาเป็น dictionary (มันคืออะไร?) นั่นคือ function splitter ซึ่งจะมาช่วยในส่วนแปลงนั้นแล้ว return ข้อมูลออกมาเป็น array ให้เราเรียกใช้กันนั่นเองครับ 🙂 เย้ !! จบ

หวังว่าพอจะมีประโยชน์นะครับ หรืออาจจะติด error ก็ใจเย็นๆค่อยแก้ ในบทนี้ต้องขอโทษจริงๆครับเพราะว่า – – ลงเป็น code ให้ copy ไม่ได้ >,< ขอบคุณที่ติดตามนะครับ

Share Button

Comments

comments