Khi xây dựng một ứng dụng web, không thể tránh khỏi việc chúng ta phải tạo ra một thứ gì đó từ dữ liệu mà người dùng nhập vào. Điều này có thể là tạo tài khoản người dùng mới khi ai đó gửi thông tin của họ qua biểu mẫu đăng ký hoặc tạo một công thức mới từ ứng dụng tổ chức công thức mới tuyệt vời của bạn. Chuyển từ dữ liệu người dùng trong một biểu mẫu sang một phiên bản mới hoàn toàn mới của công thức được lưu vào cơ sở dữ liệu của bạn yêu cầu một HTTP POST yêu cầu.
Yêu cầu POST là yêu cầu gửi dữ liệu từ biểu mẫu đến máy chủ, nơi nó có thể được tạo trong chương trình phụ trợ hoặc API và được lưu vào cơ sở dữ liệu. Theo mặc định, việc gửi biểu mẫu yêu cầu chuyển hướng hoặc làm mới trang. Mặc dù điều này hoàn toàn ổn đối với các ứng dụng nhỏ, nhưng chúng tôi muốn cung cấp trải nghiệm tải nhanh hơn, vì vậy chúng tôi sẽ ghi đè hành vi này
Sử dụng jQuery post() request cho phép chúng tôi thực hiện yêu cầu HTTP, nhận lại phản hồi và chọn cách chúng tôi hiển thị tất cả dữ liệu mà không cần chuyển hướng hoặc làm mới! Hãy xem xét kỹ hơn một chút về post() gì cần để làm tất cả những điều này.
Xem xét kỹ hơn bài đăng ()
Yêu cầu HTTP giống như một trò chơi bắt. Trình duyệt gửi yêu cầu đến máy chủ thông qua điểm cuối API và máy chủ gửi lại phản hồi. Những gì post () làm là gửi dữ liệu đến điểm cuối sẽ được tạo và lưu trong cơ sở dữ liệu của ứng dụng.
Xem xét tất cả những điều trên, chúng ta có thể giả sử post() có một số đối số, phải không? Đúng! post() chiếm tối đa bốn đối số, nhưng đối với mục đích của chúng tôi, chúng tôi đang tập trung vào hai đối số chính:đích URL và dữ liệu chúng tôi đang gửi đến đích đó.
$.post(‘/recipes’, data)
Lấy ví dụ về ứng dụng tổ chức công thức của chúng tôi, chúng tôi bắt đầu với jQuery của chúng tôi bộ chọn $. Bằng cách gọi post() , chúng tôi đang gửi dữ liệu của mình đến URL của ‘/recipes.’ Càng xa càng tốt. Chúng tôi đã chuyển một số dữ liệu đến máy chủ của mình. Bây giờ, chúng tôi đã sẵn sàng để nắm bắt phản hồi!
Điều gì quay lại với chúng tôi dưới dạng phản hồi là thứ được gọi là jQuery XHR đối tượng hoặc jqXHR , thực hiện giao diện Promise. Đừng lo lắng! Mặc dù câu cuối cùng nghe có vẻ đáng sợ, nhưng nó cho chúng ta biết rằng câu trả lời chỉ là một đối tượng. Với done() tiện dụng của jQuery , đối tượng đó có thể được tổ chức thành một định dạng dễ đọc hơn.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Tiếp tục với trò chơi tương tự bắt cá của mình, chúng tôi chuyển dữ liệu đến máy chủ bằng post() . Chúng tôi bị trả lại một jqXHR đối tượng mà chúng tôi chuyển đến done() để chúng tôi có thể xem những gì chúng tôi đã bắt được. Bây giờ chúng ta đã examined post() , hãy xem cách sử dụng nó.
jQuery post ()
Để bắt đầu, chúng tôi có một biểu mẫu HTML đơn giản:
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>
Cái nào hiển thị biểu mẫu như vậy:
Theo mặc định, khi submit được nhấp vào, trình duyệt sẽ làm mới hoặc chuyển hướng. Hãy nhớ rằng chúng tôi muốn tránh làm mới trang hoặc chuyển hướng? Nếu trang làm mới hoặc chuyển hướng, chúng tôi sẽ mất tất cả dữ liệu từ biểu mẫu. Để tránh chuyển hướng và mất dữ liệu, chúng tôi có JavaScript preventDefault() phương pháp.
<script>
$(document).ready(() => {
$('#new-recipe').submit((event) => {
event.preventDefault();
})
})
</script>
Chúng tôi đang đợi cho đến khi trang hoặc document tải, sau đó lắng nghe rồi nhấp vào nút gửi trên biểu mẫu có id là new-recipe. Điều này được thực hiện với .submit() phương thức nhận một hàm gọi lại với sự kiện nhấp chuột làm đối số. Để xem lại, một hàm gọi lại trong JavaScript là một hàm mà chúng ta có thể chuyển làm đối số cho một hàm khác sẽ được thực thi sau này.
Từ bên trong hàm gọi lại này, chúng ta có thể dừng chuyển hướng mặc định bằng preventDefault() . Bây giờ, chúng tôi không còn chuyển hướng và có thể bắt đầu gửi một số dữ liệu đến máy chủ.
Trước khi chúng tôi gọi post() để gửi dữ liệu, chúng tôi cần dữ liệu! Chúng tôi lấy dữ liệu này từ đâu?
Chúng tôi lấy dữ liệu từ biểu mẫu. Vì chúng tôi không còn chuyển hướng nữa, chúng tôi có quyền truy cập vào các giá trị trong đầu vào văn bản của biểu mẫu. Điều gì đang xảy ra với serialize() đó phương pháp?
serialize() phương thức được gọi trên biểu mẫu mà chúng tôi đã chọn với this từ khóa. Cái gì serialize() hiện là chuyển đổi dữ liệu biểu mẫu thành một chuỗi văn bản trong ký hiệu được mã hóa URL tiêu chuẩn, có thể được gửi đến máy chủ.
Khi chúng tôi đã tuần tự hóa dữ liệu biểu mẫu của mình một cách chính xác, chúng tôi lưu trữ dữ liệu đó trong một biến:
$(document).ready(() => {
$('#new-recipe').submit((event) => {
event.preventDefault();
var values = $(this).serialize();
})
})
Bây giờ chúng tôi đã lưu trữ dữ liệu của mình trong biến giá trị, bây giờ chúng tôi có thể gửi dữ liệu đó đến máy chủ!
$(document).ready(() => {
$('#new-recipe').submit((event) => {
event.preventDefault();
var values = $(this).serialize();
var posting = $.post('/recipes', values);
})
})
Hãy nhớ rằng post() trả về jqXHR vật? Chúng tôi cũng có thể lưu nó dưới dạng một biến và gọi done() vào đó để giải nén phản hồi và xử lý nó như chúng tôi chọn ở phía khách hàng của mình.
$(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"]);
})
})
})
Sau khi nhận dữ liệu và lưu trữ nó trong một biến thể dễ đọc hơn của recipe , chúng ta có thể truy cập vào thuộc tính tên và thành phần. Vì lợi ích của ví dụ, chúng tôi đã chèn các thuộc tính này vào một <div> với một lớp recipes .
Kết luận
Chúng tôi đã bao phủ rất nhiều điều ở đây! Trước khi chúng ta kỷ niệm việc tìm hiểu về post (), hãy nhanh chóng tóm tắt lại những gì chúng ta đã học được.
Cách sử dụng phổ biến cho post() nằm bên trong .submit() như một chức năng gọi lại. Kể từ .submit() được gọi trên chính biểu mẫu, chúng ta có thể sử dụng JavaScript this từ khóa để tham chiếu đến tất cả dữ liệu trong biểu mẫu và serialize() nó. Sau khi chúng tôi lưu trữ dữ liệu được tuần tự hóa vào một biến, thường được gọi là giá trị, chúng tôi có thể gửi các giá trị này đến URL đích của mình bằng cách sử dụng post() .
Nên lưu trữ jqXHR đối tượng được trả về bởi post() trong một biến thường được gọi là posting . Từ đây, chúng tôi sử dụng handy done() trên biến đăng của chúng tôi và bây giờ chúng tôi có quyền truy cập vào dữ liệu mà máy chủ đã phản hồi lại. Bây giờ tùy thuộc vào bạn về cách bạn hiển thị dữ liệu cho người dùng của mình.
Hãy dành một chút thời gian để chúc mừng bạn đã giải quyết được quá trình phức tạp của post() ! Nếu bạn đang ở giai đoạn xây dựng ứng dụng của riêng mình, hãy nhớ rằng lỗi sẽ xảy ra. Hãy bình tĩnh và gỡ lỗi!