您需要牢记一些事情。
1.有几种提交表格的方法
- 使用提交按钮
- 通过按回车
- 通过触发JavaScript中的Submit事件
- 可能更多取决于设备或将来的设备。
因此,我们应该绑定到表单提交事件,而不是按钮单击事件。这将确保我们的代码现在和将来都可在所有设备和辅助技术上运行。
2. Hijax
用户可能未启用JavaScript。一个hijax模式好这里,我们轻轻的使用JavaScript形式的控制,但离开它submittable如果JavaScript的失败。
我们应该从表单中提取URL和方法,因此,如果HTML发生更改,我们就不需要更新JavaScript。
3.简洁的JavaScript
使用event.preventDefault()代替return false是一个好习惯,因为它使事件冒泡。这使其他脚本可以加入事件,例如可能正在监视用户交互的分析脚本。
速度
理想情况下,我们应该使用外部脚本,而不是内联插入脚本。我们可以使用脚本标签在页面的顶部链接到此,或在页面底部链接以提高速度。该脚本应该悄悄地增强用户体验,而不是妨碍用户。
码
假设您同意以上所有内容,并且想要捕获Submit事件并通过AJAX(hijax模式)进行处理,则可以执行以下操作:
$(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...
});
});
});
您可以随时通过JavaScript使用以下方式手动触发表单提交:
$(function() {
$('form.my_form').trigger('submit');
});
编辑:
我最近不得不这样做,最终写了一个插件。
(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)
将data-autosubmit属性添加到您的表单标签中,然后您可以执行以下操作:
的HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
JS
$(function() {
$('form[data-autosubmit]').autosubmit();
});