Có một vài điều bạn cần ghi nhớ.
1. Có một số cách để gửi biểu mẫu
- sử dụng nút gửi
- bằng cách nhấn enter
- bằng cách kích hoạt một sự kiện gửi trong JavaScript
- có thể nhiều hơn tùy thuộc vào thiết bị hoặc thiết bị trong tương lai.
Do đó, chúng ta nên liên kết với sự kiện gửi biểu mẫu , không phải sự kiện nhấn nút. Điều này sẽ đảm bảo mã của chúng tôi hoạt động trên tất cả các thiết bị và công nghệ hỗ trợ hiện tại và trong tương lai.
2. Hijax
Người dùng có thể không kích hoạt JavaScript. Không tặc mô hình rất tốt ở đây, nơi chúng tôi nhẹ nhàng kiểm soát biểu mẫu bằng JavaScript, nhưng để lại nó có thể gửi được nếu JavaScript thất bại.
Chúng ta nên lấy URL và phương thức từ biểu mẫu, vì vậy nếu HTML thay đổi, chúng ta không cần cập nhật JavaScript.
3. JavaScript không phô trương
Sử dụng event.preventDefault () thay vì trả về false là một cách làm tốt vì nó cho phép sự kiện nổi lên. Điều này cho phép các tập lệnh khác gắn vào sự kiện, ví dụ tập lệnh phân tích có thể đang theo dõi tương tác của người dùng.
Tốc độ
Tốt nhất chúng ta nên sử dụng một tập lệnh bên ngoài, thay vì chèn tập lệnh nội tuyến. Chúng tôi có thể liên kết đến phần này trong phần đầu của trang bằng cách sử dụng thẻ script hoặc liên kết với nó ở cuối trang để biết tốc độ. Kịch bản nên âm thầm nâng cao trải nghiệm người dùng, không gây cản trở.
Mã
Giả sử bạn đồng ý với tất cả những điều trên và bạn muốn nắm bắt sự kiện gửi và xử lý nó thông qua AJAX (một mẫu Hijax), bạn có thể làm một cái gì đó như thế này:
$(function() {
$('form.my_form').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
});
Bạn có thể kích hoạt thủ công gửi biểu mẫu bất cứ khi nào bạn muốn thông qua JavaScript bằng cách sử dụng một cái gì đó như:
$(function() {
$('form.my_form').trigger('submit');
});
Biên tập:
Gần đây tôi đã phải làm điều này và cuối cùng đã viết một plugin.
(function($) {
$.fn.autosubmit = function() {
this.submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
return this;
}
})(jQuery)
Thêm một thuộc tính tự động gửi dữ liệu vào thẻ biểu mẫu của bạn và sau đó bạn có thể làm điều này:
HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
Mã não
$(function() {
$('form[data-autosubmit]').autosubmit();
});