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）如何在keypress上进行，下面几乎是同样的反应，脚本下面可以合并在一起以使脚本干净吗？

$("#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();
                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 2

将两个事件绑定到同一个函数，并检查点击或输入密钥，如下所示：

$("#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 3

$("#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 4

查看以下JSFiddle。

本质上，它归结为使用在点击提交按钮时以及在任何表单字段中按Enter键时触发的提交处理程序。正如您对表单的期望一样。

不能更清洁，更好地沟通你正在做的事情。

$("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);
                }
            }
        });

});

Jquery将几乎相似的调用合并在一起

5 个答案: