รากฐานที่สำคัญของการสร้างเว็บแอปพลิเคชันคือการใช้คำขอ HTTP คำขอ HTTP อนุญาตให้บันทึกข้อมูลจากการป้อนข้อมูลของผู้ใช้แล้วส่งผ่านส่วนหลังไปยังเซิร์ฟเวอร์ หลังจากนั้นจะมีการตอบกลับ
บางครั้งคำขอเหล่านี้จะส่งข้อมูลที่บันทึกไว้ในฐานข้อมูล เช่นเดียวกับคำขอ POST คำขอทั่วไปอื่นๆ จะได้รับการตอบกลับและแสดงต่อผู้ใช้ สิ่งนี้เรียกว่าคำขอ GET jQuery มี get() วิธีการที่ทำให้การส่งคำขอเป็นกระบวนการที่คล่องตัว
jQuery get() คืออะไร
jQuery get() เป็นวิธีการที่ส่งคำขอ GET ไปยังปลายทาง URL และรับการตอบกลับ การตอบสนองคือข้อมูลที่ส่งกลับจากเซิร์ฟเวอร์ ไม่เหมือนกับคำขอ POST คำขอ GET จะได้รับเฉพาะข้อมูลที่มีอยู่ก่อนจากเซิร์ฟเวอร์เท่านั้น มันไม่ได้บันทึกอะไรลงในฐานข้อมูล
คำขอ GET มีประโยชน์สำหรับการขอชุดย่อยของข้อมูลเฉพาะและดำเนินการบางอย่างกับข้อมูลนั้น ตัวอย่างเช่น หากเรากำลังสร้างแอปอีคอมเมิร์ซ เราจะส่งคำขอ GET ไปยังปลายทาง URL เพื่อเข้าถึงผลิตภัณฑ์ เราสามารถนำข้อมูลที่ได้รับมาตอบกลับ และจัดรูปแบบเพื่อสร้างเลย์เอาต์การ์ดของผลิตภัณฑ์ทั้งหมดที่มีให้ซื้อ
jQuery get() มีหน้าที่ส่งคำขอไปยัง URL และรับข้อมูลเป็นการตอบกลับ ตอนนี้ผู้พัฒนาสามารถเข้าถึงข้อมูลจากเซิร์ฟเวอร์และสามารถเลือกแสดงให้ผู้ใช้เห็นได้ตามต้องการ
ตอนนี้เราคุ้นเคยกับคำขอ GET แล้ว มาดูที่ get() ไวยากรณ์ของเมธอด
get() ไวยากรณ์ jQuery
jQuery ทำให้การส่งคำขอ GET ตรงไปตรงมา get() รับที่อยู่ URL เป็นสตริงและฟังก์ชันเรียกกลับเพื่อรับข้อมูล โดยทั่วไป ฟังก์ชันเรียกกลับเป็นฟังก์ชันที่ส่งผ่านไปยังเมธอดที่จะดำเนินการในภายหลัง
สำหรับคำอธิบายเชิงลึกเพิ่มเติมเกี่ยวกับฟังก์ชันการโทรกลับ โปรดดูคู่มือนี้
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
มีอาร์กิวเมนต์ที่เป็นตัวเลือก get() ยอมรับ แต่ที่นิยมใช้กันมากที่สุดคือ URL และฟังก์ชันเรียกกลับ
ต่อจากตัวอย่างอีคอมเมิร์ซของเรา มาดูกันว่าคำขอ GET พื้นฐานจะหน้าตาเป็นอย่างไรโดยใช้ get() :
$.get('/products', (data) => {
console.log(data)
})
เราเรียก get() และส่ง URL เป็นสตริง คำขอถูกส่งไปยังหน้าดัชนีผลิตภัณฑ์และเซิร์ฟเวอร์จะส่งข้อมูลกลับ ฟังก์ชันเรียกกลับยอมรับข้อโต้แย้งสองสามข้อ แต่ข้อมูลและสถานะจะเพียงพอสำหรับวัตถุประสงค์ของเรา
ข้อมูลแสดงถึงข้อมูลที่ได้รับจากการร้องขอ ในตัวอย่างของเรา เราเพียงแค่แสดงผลสิ่งที่ส่งคืนในคอนโซล jQuery สร้างขึ้นเพื่อจดจำประเภทข้อมูลบางประเภท แต่เป็นไปได้มากว่าเราจะได้รับวัตถุ JSON
จำเป็นต้องใช้โค้ดเพิ่มเติมเพื่อดึงข้อมูลที่ต้องการจากออบเจ็กต์ JSON ของเรา มาดูกันว่าเราจะทำอะไรได้บ้าง
jQuery get() ตัวอย่าง
ตัวอย่างเช่น ลองใช้ API สนุกๆ เว็บไซต์นี้บอกเราว่าขณะนี้นักบินอวกาศอยู่ในอวกาศกี่คน! นอกจากนี้ยังให้ชื่อและยานอวกาศแก่เรา เริ่มต้นด้วยการส่ง URL ไปที่ get() :
$.get('https://api.open-notify.org/astros.json', (data) => {
console.log(data)
})
เมื่อเราส่งคำขอ เราได้รับการตอบกลับที่บันทึกไว้ในคอนโซลของเรา:
จาก URL เรารู้อยู่แล้วว่าเราจะได้รับวัตถุ JSON ที่ส่งคืนจากเซิร์ฟเวอร์ ในคอนโซล เราจะเห็นปุ่มต่างๆ ของ "ข้อความ" "หมายเลข" และ "ผู้คน" คุณค่าของข้อความแห่งความสำเร็จช่วยในการจัดการข้อผิดพลาด
ปุ่มตัวเลขหมายถึงจำนวนคนในอวกาศ “ผู้คน” ชี้ไปที่ค่าที่มีอาร์เรย์ของวัตถุ จากที่นี่ เราสามารถวนซ้ำอาร์เรย์ "ผู้คน" และแสดงข้อมูลนั้นแก่ผู้ใช้เป็นรายการ การรับข้อมูลกลับในลักษณะนี้ทำให้ผู้พัฒนามีตัวเลือกในการแสดงข้อมูลที่เซิร์ฟเวอร์ส่งคืน
บทสรุป
เราตรวจสอบแล้วว่าคำขอ GET คืออะไร และ jQuery ทำให้มันรวดเร็วและตรงไปตรงมาได้อย่างไร หลังจากทำความคุ้นเคยกับหลักไวยากรณ์ทั่วไป เราก็พบว่า get() ในการดำเนินการ สิ่งสำคัญคือต้องสังเกตว่าข้อมูลสามารถทำซ้ำและแสดงผลจากเนื้อความของฟังก์ชันเรียกกลับได้
จากที่นี่ โปรเจ็กต์สนุกๆ อาจค้นหา API ง่ายๆ และสร้างโปรเจ็กต์ขนาดเล็กเพื่อฝึกส่งคำขอ GET และแสดงข้อมูลนั้น การรับและแสดงผลข้อมูลในลักษณะที่น่าพอใจคือจุดเริ่มต้นของการเป็นนักพัฒนาที่เชี่ยวชาญ
