如何使 ajax javascript 在按下回车键时工作答案

【问题标题】：how to make ajax javascript work on press of enter key如何使 ajax javascript 在按下回车键时工作
【发布时间】：2012-04-18 05:12:44
【问题描述】：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function() {
    $("input[name='search_user_submit']").click(function() {
        var cv = $('#newInput').val();
        var cvtwo = $('input[name="search_option"]:checked').val();
        var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
        $("#SR").html('<img src="loading.gif"/>').show();
        var url = "user.php";
        $.post(url, data, function(data) {
            $("#SR").html(data).show();
        });

    });
});
});//]]>  
</script>

当我按下按钮时这很好用，但是当我按下回车键时，所有变量及其值都会显示在地址栏中。

那么我怎样才能为此添加按键事件：-

我已经尝试过这个按键代码仍然无法正常工作：-

<script type="text/javascript">
$(window).load(function(){
    $(document).ready(function() {
    function Script(e) {
        if (e.keyCode == 13) {
             var cv = $('#newInput').val();
            var cvtwo = $('input[name="search_option"]:checked').val();
            var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
            $("#SR").html('<img src="loading.gif"/>').show();
            var url = "user.php";
            $.post(url, data, function(data) {
                $("#SR").html(data).show();
            });
        }
    }
    });
});
</script>

对于按键，我在单击选项按钮时创建了文本框，在我的 javascript 中我已经指定了这个：-

input.onkeypress = 'return Script(event)';

【问题讨论】：

是否有正在提交的封闭表单？此外，您应该从事件处理程序中执行return false

标签： php javascript forms jquery keypress

【解决方案1】：

您应该使用表单，并拥有onsubmit 事件，而不是处理回车键。

<form id="myform">
    <!-- ... -->
    <input type="submit">
</form>

<script>
document.getElementById("myform").onsubmit = function (ev) {
    ev.preventDefault();
    // ...
}
</script>

没有进行错误检查，但希望你明白。

【讨论】：

【解决方案2】：

我认为你想执行 ajax 调用并在 enter 上按一下按钮

试试这个

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function() {
    $("input[name='search_user_submit']").keyup(function(event){

    if(event.keyCode == 13)
{


        var cv = $('#newInput').val();
        var cvtwo = $('input[name="search_option"]:checked').val();
        var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
        $("#SR").html('<img src="loading.gif"/>').show();
        var url = "user.php";
        $.post(url, data, function(data) {
            $("#SR").html(data).show();
}
        });

    });
});
});//]]>  
</script>

【讨论】：

【解决方案3】：

要回答您的问题，我认为按 Enter 键就是将表单发送到浏览器，并且它必须是操作设置为 GET（或没有，默认为 GET）的表单。这会导致浏览器刷新并且表单变量作为查询字符串出现在 URL 中。浏览器刷新会阻止您的脚本真正被执行（或者在页面重新加载时正在执行，所以您看不到它）。

如果您执行e.preventDefault() 或Script()，则将阻止该默认操作发生。

[edit] Gopal 击败了我，给出了几乎相同的答案。

我确实想补充一点，jQuery 处理事件绑定和东西，也许为了更好的流程，您可以将 function Script(e) 替换为

$('input').keypress(function(e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        var cv = $('#newInput').val();
        var cvtwo = $('input[name="search_option"]:checked').val();
        var data = { "cv" : cv, "cvtwo" : cvtwo }; // sending two variables
        $("#SR").html('<img src="loading.gif"/>').show();
        var url = "user.php";
        $.post(url, data, function(data) {
            $("#SR").html(data).show();
        });
    }
});

然后你在任何地方都不需要input.onkeypress = 'return Script(event)';。 jQuery 有一个类似.keypress() 的函数（参见jQuery's keypress）几乎可以处理任何事件，您甚至可以使用.bind() 来绑定多个事件。请参阅documentation 了解更多信息。

【讨论】：