javascript - 如何在单击按钮并按 Enter 键时启动 jquery 函数

Question

我有一个使用 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/");
         }
     }
 });
});

我尝试复制整个函数，但这次在按下回车键时启动它，但一定有另一种方法，代码行数更少？不发送双重ajax请求。

Answer 1

当您将控件包含在 <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)