Những gì bạn đang thiếu là sự hiểu biết về đánh dấu ngữ nghĩa và DOM.
Thực tế, bạn có thể làm bất cứ điều gì bạn muốn với đánh dấu HTML5 và hầu hết các trình duyệt sẽ phân tích cú pháp đó. Lần trước tôi đã kiểm tra, WebKit / Blink thậm chí còn cho phép các phần tử giả bên trong <input>các phần tử , điều này rõ ràng là vi phạm thông số kỹ thuật - Gecko không quá nhiều. Tuy nhiên, làm bất cứ điều gì bạn thích với đánh dấu của mình chắc chắn sẽ làm mất hiệu lực của nó về mặt ngữ nghĩa.
Tại sao chúng ta đặt <input>các phần tử bên trong các <form>phần tử? Vì lý do tương tự, chúng tôi đặt <li>các thẻ bên trong các phần tử <ul>và <ol>- đó là nơi chúng thuộc về. Nó chính xác về mặt ngữ nghĩa và giúp xác định đánh dấu. Trình phân tích cú pháp, trình đọc màn hình và các phần mềm khác nhau có thể hiểu rõ hơn đánh dấu của bạn khi nó chính xác về mặt ngữ nghĩa - khi đánh dấu có ý nghĩa, không chỉ cấu trúc.
Phần <form>tử này cũng cho phép bạn xác định methodvà actioncác thuộc tính, cho phép trình duyệt biết phải làm gì khi biểu mẫu được gửi. AJAX không phải là một công cụ có phạm vi bảo hiểm 100% và với tư cách là một nhà phát triển web, bạn nên thực hiện quá trình giảm cấp duyên dáng - các biểu mẫu có thể được gửi và dữ liệu được truyền, ngay cả khi JS bị tắt.
Cuối cùng, tất cả các biểu mẫu đều được đăng ký đúng cách trong DOM. Chúng ta có thể xem xét điều này bằng JavaScript. Nếu bạn mở bảng điều khiển của mình trên chính trang này và nhập:
document.forms
Bạn sẽ nhận được một bộ sưu tập đẹp của tất cả các biểu mẫu trên trang. Thanh tìm kiếm, hộp nhận xét, hộp trả lời - tất cả các dạng thích hợp. Giao diện này có thể hữu ích để truy cập thông tin và tương tác với các phần tử này. Ví dụ, các biểu mẫu có thể được đăng nhiều kỳ rất dễ dàng.
Đây là một số tài liệu đọc:
Ghi chú: <input> các phần tử có thể được sử dụng bên ngoài biểu mẫu, nhưng nếu ý định của bạn là gửi dữ liệu theo bất kỳ cách nào, bạn nên sử dụng biểu mẫu.
Đây là một phần của câu trả lời mà tôi lật lại câu hỏi.
Tôi đang làm cho cuộc sống của mình khó khăn hơn bằng cách tránh những hình thức như thế nào?
Đầu tiên và quan trọng nhất - các phần tử vùng chứa. Ai cần chúng, phải không ?!
Chắc chắn các phần tử <input>và nhỏ của bạn <button>được lồng vào bên trong một số loại phần tử chứa? Họ không thể cứ lơ lửng giữa mọi thứ khác. Vậy nếu không phải là a <form>, thì sao? A <div>? A<span> ?
Các phần tử này phải nằm ở đâu đó và trừ khi phần đánh dấu của bạn là một mớ hỗn độn điên rồ, phần tử vùng chứa có thể chỉ là một biểu mẫu.
Không? Oh.
Tại thời điểm này, tiếng nói trong đầu tôi rất tò mò về cách bạn tạo trình xử lý sự kiện của mình cho tất cả các tình huống AJAX khác nhau này. Phải có rất nhiều, nếu bạn cần phải cắt giảm đánh dấu của mình để tiết kiệm byte. Sau đó, bạn phải tạo các hàm tùy chỉnh cho mỗi sự kiện AJAX tương ứng với mỗi 'tập hợp' các phần tử - mà bạn phải nhắm mục tiêu riêng lẻ hoặc với các lớp, phải không? Không có cách nào để thực sự nhóm các yếu tố này một cách chung chung, vì chúng tôi đã xác định rằng chúng chỉ đi lang thang xung quanh đánh dấu, làm bất cứ điều gì cho đến khi chúng cần thiết.
Vì vậy, bạn mã tùy chỉnh một vài trình xử lý.
$('#searchButton').on('click', function (e) {
e.preventDefault();
var search = $('#mySearch');
$.ajax({
url: 'http://example.com/text',
type: 'GET',
dataType: 'text',
data: 'query=' + search.val(),
success: function (data) {
console.log(data);
}
});
});
$('#login').on('click', function (e) {
e.preventDefault();
var user = $('#username'),
pass = $('#password'),
rem = $('#remember');
$.ajax({
url: 'http://example.com/login',
type: 'POST',
data: user.add(pass, rem).serialize(),
dataType: 'text',
success: function (data) {
console.log(data);
}
});
});
<!-- No containers, extra markup is silly. -->
<input type="text" id="mySearch" value="query" />
<button id="searchButton">Search</button>
<input type="text" id="username" name="username" value="user" />
<input type="password" id="password" name="password" value="pass" />
<input type="checkbox" id="remember" name="remember" checked /> stay logged in
<button id="login">Login</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Đây là phần mà bạn nói những điều như:
'Tôi hoàn toàn sử dụng các chức năng có thể tái sử dụng. Đừng quá phóng đại.'
Đủ công bằng, nhưng bạn vẫn cần tạo những tập hợp các phần tử duy nhất này, hoặc tập hợp lớp mục tiêu, phải không? Bạn vẫn phải nhóm các yếu tố này bằng cách nào đó.
Hãy cho tôi mượn đôi mắt của bạn (hoặc đôi tai, nếu bạn đang sử dụng trình đọc màn hình và cần một số hỗ trợ - điều tốt là chúng ta có thể thêm một số ARIA vào tất cả đánh dấu ngữ nghĩa này , phải không?), Và hãy xem sức mạnh của biểu mẫu chung.
function genericAjaxForm (e) {
e.preventDefault();
var form = $(this);
return $.ajax({
url: form.attr('action'),
type: form.attr('method'),
dataType: form.data('type'),
data: form.serialize()
});
}
$('#login-form').on('submit', function (e) {
genericAjaxForm.call(this, e).done(function (data) {
console.log(data);
});
});
<form action="http://example.com/login" method="POST" data-type="text" id="login-form">
<input type="text" name="username" value="user" />
<input type="password" name="password" value="mypass" />
<label>
<input type="checkbox" name="remember" /> Remember me
</label>
<button type="submit">Login</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Chúng tôi có thể sử dụng điều này với bất kỳ biểu mẫu thông thường nào, duy trì sự xuống cấp duyên dáng của chúng tôi và để biểu mẫu mô tả hoàn toàn cách nó hoạt động. Chúng tôi có thể mở rộng chức năng cơ bản này trong khi vẫn giữ một phong cách chung - mô-đun hơn, ít đau đầu hơn. JavaScript chỉ lo lắng về những thứ của riêng nó, như ẩn các phần tử thích hợp hoặc xử lý bất kỳ phản hồi nào mà chúng tôi nhận được.
Và bây giờ bạn nói:
'Nhưng tôi bọc các biểu mẫu giả của mình trong <div>các phần tử có ID cụ thể - sau đó tôi có thể nhắm mục tiêu các đầu vào một cách lỏng lẻo với .find, và .serializechúng, và ...'
Ô .. cái đó là gì thế? Bạn thực sự bọc các <input>phần tử của mình trong một thùng chứa?
Vậy tại sao nó vẫn chưa phải là hình thức?