เมื่อสร้างเว็บแอป เราจะต้องสร้างบางสิ่งจากข้อมูลที่ผู้ใช้ป้อนอย่างหลีกเลี่ยงไม่ได้ นี่อาจเป็นการสร้างบัญชีผู้ใช้ใหม่เมื่อมีคนส่งข้อมูลของพวกเขาผ่านแบบฟอร์มลงทะเบียน หรือสร้างสูตรอาหารใหม่จากแอปจัดการสูตรอาหารใหม่ที่ยอดเยี่ยมของคุณ การเปลี่ยนจากข้อมูลผู้ใช้ในแบบฟอร์มไปเป็นอินสแตนซ์ใหม่ของสูตรที่บันทึกไว้ในฐานข้อมูลของคุณต้องใช้ HTTP POST ขอ.
คำขอ POST คือสิ่งที่ส่งข้อมูลจากแบบฟอร์มไปยังเซิร์ฟเวอร์ ซึ่งสามารถสร้างในแบ็กเอนด์หรือ API และบันทึกลงในฐานข้อมูล โดยค่าเริ่มต้น การส่งแบบฟอร์มต้องมีการเปลี่ยนเส้นทางหรือการรีเฟรชหน้า แม้ว่าสิ่งนี้จะดีอย่างสมบูรณ์สำหรับแอปขนาดเล็ก แต่เราต้องการมอบประสบการณ์การโหลดที่รวดเร็วขึ้น เพื่อที่เราจะลบล้างพฤติกรรมนี้
การใช้ jQuery post() คำขอช่วยให้เราส่งคำขอ HTTP ตอบกลับ และเลือกวิธีที่เราแสดงข้อมูลทั้งหมดโดยไม่ต้องเปลี่ยนเส้นทางหรือรีเฟรช! มาดูกันดีกว่าว่า post() . คืออะไร จำเป็นต้องทำทั้งหมดนี้
มองใกล้ที่โพสต์ ()
คำขอ HTTP เป็นเหมือนเกมจับ เบราว์เซอร์ส่งคำขอไปยังเซิร์ฟเวอร์ผ่านจุดปลาย API และเซิร์ฟเวอร์ส่งการตอบกลับกลับมา โพสต์ () ทำอะไรคือการส่งข้อมูลไปยังปลายทางที่จะสร้างและบันทึกไว้ในฐานข้อมูลของแอป
เมื่อพิจารณาจากทั้งหมดข้างต้นแล้ว เราสามารถถือว่า post() ใช้อาร์กิวเมนต์บางอย่างใช่ไหม ใช่ไหม! post() ใช้อาร์กิวเมนต์ได้ถึงสี่ข้อ แต่สำหรับจุดประสงค์ของเรา เรากำลังมุ่งเน้นไปที่สองข้อหลัก:ปลายทางของ URL และข้อมูลที่เราส่งไปยังปลายทางนั้น
$.post(‘/recipes’, data)
นำตัวอย่างแอปการจัดระเบียบสูตรของเรา เริ่มด้วย jQuery ตัวเลือก $ โดยเรียกใช้ post() เรากำลังส่งข้อมูลของเราไปยัง URL ของ ‘/recipes.’ จนถึงตอนนี้ดีมาก เราได้ส่งข้อมูลบางส่วนไปยังเซิร์ฟเวอร์ของเราแล้ว ตอนนี้เราพร้อมที่จะรับคำตอบแล้ว!
สิ่งที่ย้อนกลับมาหาเราคือสิ่งที่เรียกว่า jQuery XHR วัตถุ หรือ jqXHR ซึ่งใช้อินเทอร์เฟซ Promise ไม่ต้องกังวล! แม้ว่าประโยคสุดท้ายนั้นอาจฟังดูน่ากลัว แต่ก็บอกเราว่าการตอบสนองเป็นเพียงวัตถุ ด้วย done() . ที่สะดวกของ jQuery วิธี วัตถุนั้นสามารถจัดในรูปแบบที่อ่านง่าย
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
เพื่อให้สอดคล้องกับเกมการเปรียบเทียบ เราจึงส่งข้อมูลไปยังเซิร์ฟเวอร์ด้วย post() . เราถูกโยนกลับ jqXHR วัตถุที่เราส่งต่อไปยัง done() เพื่อให้เราเห็นสิ่งที่เราจับได้ ตอนนี้เราได้ examined post() . อย่างใกล้ชิดแล้ว มาดูวิธีใช้งานกัน
โพสต์ jQuery()
ในการเริ่มต้น เรามีรูปแบบ HTML ธรรมดา:
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <h2> New Recipe </h2> <form id='new-recipe'> <label for="name">Recipe Name</label><br> <input type="text" name="name" id="name"><br> <label for="ingredients">Ingredients</label><br> <input type="text" name="ingredients" id="ingredients"><br> <button type="submit"> Create Recipe </button> </form>
ซึ่งแสดงรูปแบบดังนี้:
โดยค่าเริ่มต้น เมื่อ submit คลิกปุ่ม เบราว์เซอร์จะรีเฟรชหรือเปลี่ยนเส้นทาง จำได้ไหมว่าเราต้องการหลีกเลี่ยงการรีเฟรชหน้าหรือเปลี่ยนเส้นทาง? หากหน้ารีเฟรชหรือเปลี่ยนเส้นทาง เราจะสูญเสียข้อมูลทั้งหมดของเราจากแบบฟอร์ม เพื่อหลีกเลี่ยงการเปลี่ยนเส้นทางและข้อมูลสูญหาย เรามี JavaScript preventDefault() กระบวนการ.
<script>
$(document).ready(() => {
$('#new-recipe').submit((event) => {
event.preventDefault();
})
})
</script>
เรากำลังรอหน้าเพจหรือ document โหลดแล้วฟังจากนั้นจึงคลิกปุ่มส่งบนแบบฟอร์มที่มีรหัส new-recipe. ทำได้ด้วย .submit() เมธอดที่ใช้ฟังก์ชันเรียกกลับโดยมีเหตุการณ์คลิกเป็นอาร์กิวเมนต์ ในการตรวจสอบ ฟังก์ชันเรียกกลับของ JavaScript เป็นฟังก์ชันที่เราสามารถส่งผ่านเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่นที่จะดำเนินการในภายหลังได้
จากภายในฟังก์ชันเรียกกลับนี้ เราสามารถหยุดการเปลี่ยนเส้นทางเริ่มต้นด้วย preventDefault() . ตอนนี้ เราจะไม่เปลี่ยนเส้นทางอีกต่อไป และสามารถเริ่มส่งข้อมูลบางส่วนไปยังเซิร์ฟเวอร์ได้
ก่อนที่เราจะเรียกใช้ post() ในการส่งข้อมูล เราต้องการข้อมูล! เราเอาข้อมูลนี้มาจากไหน?
เราได้รับข้อมูลจากแบบฟอร์ม เนื่องจากเราไม่ได้เปลี่ยนเส้นทางอีกต่อไป เราจึงสามารถเข้าถึงค่าในการป้อนข้อความของแบบฟอร์มได้ เกิดอะไรขึ้นกับ serialize() กระบวนการ?
serialize() method ถูกเรียกในแบบฟอร์มที่เราได้เลือกไว้ด้วย this คำสำคัญ. serialize()อะไร จะแปลงข้อมูลในแบบฟอร์มเป็นสตริงข้อความในรูปแบบการเข้ารหัส URL มาตรฐาน ซึ่งสามารถส่งไปยังเซิร์ฟเวอร์ได้
เมื่อเราจัดลำดับข้อมูลในแบบฟอร์มของเราอย่างเหมาะสมแล้ว เราจะจัดเก็บไว้ในตัวแปร:
$(document).ready(() => {
$('#new-recipe').submit((event) => {
event.preventDefault();
var values = $(this).serialize();
})
})
ตอนนี้เราได้เก็บข้อมูลของเราไว้ในตัวแปรค่าแล้ว ตอนนี้เราสามารถส่งข้อมูลไปยังเซิร์ฟเวอร์ได้แล้ว!
$(document).ready(() => {
$('#new-recipe').submit((event) => {
event.preventDefault();
var values = $(this).serialize();
var posting = $.post('/recipes', values);
})
})
จำไว้ว่า post() ส่งคืน jqXHR วัตถุ? เราสามารถบันทึกเป็นตัวแปรได้เช่นกันและเรียก done() เพื่อแกะการตอบสนองและจัดการกับมันในขณะที่เราเลือกจากฝั่งลูกค้าของเรา
$(document).ready(() => {
$('#new-recipe').submit((e) => {
e.preventDefault();
var values = $(this).serialize();
var posting = $.post('/recipes', values);
posting.done( (data) => {
var recipe = data;
$('.recipes').text(recipe["name"]);
$('.recipes').text(recipe["ingredients"]);
})
})
})
หลังจากได้รับข้อมูลและจัดเก็บไว้ในตัวแปร recipe เราสามารถเข้าถึงชื่อและคุณสมบัติของส่วนผสมได้ ตัวอย่างเช่น เราได้แทรกแอตทริบิวต์เหล่านี้ลงใน <div> ด้วยคลาส recipes .
บทสรุป
เราได้ครอบคลุมพื้นที่มากมายที่นี่! ก่อนที่เราจะเฉลิมฉลองการเรียนรู้เกี่ยวกับ post() เรามาสรุปสิ่งที่เราได้เรียนรู้กันอย่างรวดเร็วก่อน
การใช้งานทั่วไปสำหรับ post() อยู่ภายใน .submit() เป็นฟังก์ชันเรียกกลับ ตั้งแต่ .submit() ถูกเรียกบนฟอร์มเอง เราสามารถใช้ JavaScript this คีย์เวิร์ดเพื่ออ้างอิงข้อมูลทั้งหมดในแบบฟอร์มและ serialize() มัน. หลังจากที่เราจัดเก็บข้อมูลที่เป็นอนุกรมลงในตัวแปร ซึ่งมักเรียกว่าค่า เราสามารถส่งค่าเหล่านี้ไปยัง URL ปลายทางของเราโดยใช้ post() .
เป็นนิสัยที่ดีในการจัดเก็บ jqXHR วัตถุที่ส่งคืนโดย post() ในตัวแปรที่เรียกกันว่า posting . จากที่นี่เราใช้ handy done() วิธีการบนตัวแปรการโพสต์ของเรา และตอนนี้เราสามารถเข้าถึงข้อมูลที่เซิร์ฟเวอร์ตอบกลับด้วย ตอนนี้ขึ้นอยู่กับคุณแล้วว่าคุณจะแสดงข้อมูลให้ผู้ใช้เห็นอย่างไร
ใช้เวลาสักครู่เพื่อแสดงความยินดีกับตัวเองในการจัดการกับกระบวนการที่ซับซ้อนของ post() ! หากคุณอยู่ในขั้นตอนของการสร้างแอปของคุณเอง จำไว้ว่าข้อผิดพลาดนั้นเกิดขึ้นได้ สงบสติอารมณ์และแก้ไขข้อบกพร่อง!
