我有一个使用Ajax从表单发送一些数据的功能。
为了防止表单在没有Ajax的情况下发布,我使用preventDefault();
,当按enter
时,这也阻止了表单的提交。
当单击按钮(如现在)以及按下enter
按钮时,如何确保启动以下功能?
jQuery的:
$("body").on("click",".login-button",function(e){
e.preventDefault();
loginform = $(".login-form").serialize();
$.ajax({
type:'post',
url:"includes/inloggen.php",
data:({loginform: loginform}),
success:function(data){
var obj = JSON.parse(data);
var arrayspot = 0;
for (var i = 0; i < obj.length; i++) {
var status = obj[i].status;
var field = obj[i].field;
if(status == 'error'){
var message = obj[i].message;
$( 'input[name="' + field + '"]' ).parent().addClass('invalid-input');
var errorveld = $( 'input[name="' + field + '"]' ).parent();
$( 'input[name="' + field + '"]' ).parent().next('.inputerror').remove();
errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
}else if(status == 'success'){
$( 'input[name="' + field + '"]' ).parent().next('.inputerror').remove();
$( 'input[name="' + field + '"]' ).parent().removeClass('invalid-input');
}
var arrayspot = parseInt(i);
}
if(obj[arrayspot].totalstatus == 'error'){
$( "#loginresult" ).removeClass('positiveresult');
$( "#loginresult" ).show().empty().append( obj[arrayspot].totalmessage );
}else if(obj[arrayspot].totalstatus == 'success'){
window.location.replace("https://website.nl/new/");
}
}
});
});
我尝试复制整个功能,但是这次在Enter press上启动它,但是必须有另一种方法来减少代码行吗?无需发送双ajax请求。
最佳答案
当控件包含在<form>
中时,可以免费获得此行为。从使用serialize()
的代码上下文来看,情况似乎已经如此。这样,您可以简单地修改逻辑以侦听表单的submit
事件,而不是提交按钮的click
事件。尝试这个:
$("body").on("submit", ".login-form", function(e) {
e.preventDefault();
loginform = $(this).serialize();
$.ajax({
type: 'post',
url: "includes/inloggen.php",
data: {
loginform: loginform
},
success: function(data) {
var obj = JSON.parse(data);
var arrayspot = 0;
for (var i = 0; i < obj.length; i++) {
var status = obj[i].status;
var field = obj[i].field;
var $errorveld = $('input[name="' + field + '"]').parent();
if (status == 'error') {
var message = obj[i].message;
$errorveld.addClass('invalid-input');
$errorveld.next('.inputerror').remove();
$errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
} else if (status == 'success') {
$errorveld.next('.inputerror').remove();
$errorveld.removeClass('invalid-input');
}
var arrayspot = parseInt(i);
}
if (obj[arrayspot].totalstatus == 'error') {
$("#loginresult").removeClass('positiveresult').show().empty().append(obj[arrayspot].totalmessage);
} else if (obj[arrayspot].totalstatus == 'success') {
window.location.replace("https://website.nl/new/");
}
}
});
});
还要注意,通过删除
()
属性周围不必要的data
并缓存$('input[name="' + field + '"]').parent()
选择器,我对逻辑进行了一些整理。最后,如果正确设置了响应的MIME类型,则无需手动调用
JSON.parse(data)