jQuery來幾乎相同的呼叫合併到一起

Question

我其中有一個按鈕是點擊調用Ajax請求登錄表單，請求是觸發只有當我的鼠標點擊的按鈕，而不是按回車鍵，

<form id="signin_form"> 
    Email: <input type="text" id="email" name="email"> 
    Password: <input type="password" id="password" name="password"> 
    <input type="button" id="btn_signin" value="Sign In"> 
</form> 

我從這裏找到了一個工作示例（感謝Stackoverflow），通過如何在按鍵上進行操作，下面幾乎是相同的反應，下面的腳本可以合併在一起以便使腳本清潔？

$("#password").keypress(function(event) { 
    if (event.which == 13) { 
     event.preventDefault(); 

     var parameters = $('#signin_form').serialize(); 

     $.ajax({ 
      url: baseurl + 'loginRequest', 
      type: 'POST', 
      data: parameters, 
      dataType: 'json', 
      success: function(output_str){ 
       if(output_str == "success"){ 

        window.location.replace(window.location); 
       }else{ 
        $('#result').html(output_str); 
       } 
      } 
     }); 
    } 
}); 

// login request 
$('#btn_signin').click(function(){ 
    var parameters = $('#signin_form').serialize(); 

    $.ajax({ 
     url: baseurl + '/login', 
     type: 'POST', 
     data: parameters, 
     dataType: 'json', 
     success: function(output_str){ 
      if(output_str == "success"){ 

       window.location.replace(window.location); 
      }else{ 
       $('#result').html(output_str); 
      } 
     } 
    }); 
}); 

謝謝。

Answer 1

$("#password").keypress(function(event) { 
    if (event.which == 13) { 
     event.preventDefault(); 
     $('#btn_signin').click(); 
    } 
}); 

// login request 
$('#btn_signin').click(function(){ 
    var parameters = $('#signin_form').serialize(); 

    $.ajax({ 
     url: baseurl + '/login', 
     type: 'POST', 
     data: parameters, 
     dataType: 'json', 
     success: function(output_str){ 
      if(output_str == "success"){ 

       window.location.replace(window.location); 
      }else{ 
       $('#result').html(output_str); 
      } 
     } 
    }); 
}); 

Answer 2

我想這是你問的

$("#password").keypress(function (event) { 
      if (event.which == 13) { 
       event.preventDefault(); 
       performLogin(); 
      } 
     }); 

    // login request 
    $('#btn_signin').click(function() { 
     var parameters = $('#signin_form').serialize(); 
     performLogin(); 
    }); 

    function performLogin() { 
     var parameters = $('#signin_form').serialize(); 
     $.ajax({ 
      url: baseurl + '/login', 
      type: 'POST', 
      data: parameters, 
      dataType: 'json', 
      success: function (output_str) { 
       if (output_str == "success") { 

        window.location.replace(window.location); 
       } else { 
        $('#result').html(output_str); 
       } 
      } 
     }); 
    } 

Answer 3

綁定兩個事件相同的功能，併爲您點擊或回車鍵，就像這樣：

$("#password").on('keypress click', function(event) { 
    if (event.type == 'click' || event.which == 13) { 
     event.preventDefault(); 
     var parameters = $('#signin_form').serialize(); 

     $.ajax({ 
      url: baseurl + 'loginRequest', 
      type: 'POST', 
      data: parameters, 
      dataType: 'json', 
      success: function(output_str){ 
       if(output_str == "success"){ 
        window.location.replace(window.location); 
       }else{ 
        $('#result').html(output_str); 
       } 
      } 
     }); 
    } 
}); 

Answer 4

檢查出以下JSFiddle。

在本質上它歸結爲使用提交處理程序時觸發，當你點擊提交按鈕，當你按任何表單字段的進入。正如你所期望的那樣。

不能更清潔，溝通更好你在做什麼。

$("form").submit(function() {   
    // Your ajax code here... 

    return false; 
}); 

爲了使這項工作更改您的輸入類型從'按鈕'到'提交'。

Answer 5

您可以使用單個.submit（）函數來實現兩個表單提交功能，而不是使用按鍵並單擊。您必須將您的<input type="button" id="btn_signin" value="Sign In">設爲<input type="submit" id="btn_signin" value="Sign In">

$("#password").submit(function(){ 

var parameters = $('#signin_form').serialize(); 

     $.ajax({ 
      url: baseurl + 'loginRequest', 
      type: 'POST', 
      data: parameters, 
      dataType: 'json', 
      success: function(output_str){ 
       if(output_str == "success"){ 

        window.location.replace(window.location); 
       }else{ 
        $('#result').html(output_str); 
       } 
      } 
     }); 

});