เวลาสร้างเว็บแอป จะต้องสร้างข้อมูลจาก input ของผู้ใช้ เช่น สมัครสมาชิก, บันทึกสูตรอาหาร ต้องใช้ HTTP POST request ส่งข้อมูลจากฟอร์มไป server/API บันทึกลง database
Default form submit ต้อง redirect/refresh หน้า jQuery post() ทำ AJAX request ส่งข้อมูล รับ response จัดการแสดงผล โดยไม่ต้อง refresh!
รายละเอียด post()
HTTP request เหมือนเล่นโยนบอล: Browser โยน request ไป server (API endpoint) Server โยน response กลับ
post() ส่งข้อมูลไป endpoint ที่จะสร้าง/บันทึกใน database รับ arguments สำคัญ 2 ตัว: URL และ data
$.post('/recipes', data);
Response คือ jqXHR object (implements Promise) ใช้ done() จัดรูปแบบ response ให้อ่านง่าย
ตัวอย่างใช้งาน jQuery post()
1. HTML Form
<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> <div class="recipes"></div>
2. JavaScript: Prevent Default + Serialize + Post
$(document).ready(() => {
$('#new-recipe').submit((event) => {
event.preventDefault(); // หยุด redirect/refresh
var values = $(this).serialize(); // แปลง form data เป็น URL-encoded string
var posting = $.post('/recipes', values); // ส่ง POST request
posting.done((data) => {
var recipe = data;
$('.recipes').text(recipe["name"]);
$('.recipes').text(recipe["ingredients"]);
});
});
});
serialize() แปลง form data เป็น string มาตรฐาน ส่งได้เลย post() คืน jqXHR ใช้ done() รับ response แล้วจัดการแสดงผล
สรุปขั้นตอน
- ใช้
.submit()callback บน form event.preventDefault()หยุด default submit$(this).serialize()ดึงข้อมูลฟอร์ม$.post(url, values)ส่ง request- เก็บ jqXHR ไว้ในตัวแปร (เช่น
posting) posting.done()รับ response แล้วแสดงผล
Error เป็นเรื่องปกติ อย่ากลัว debug ดู!
