Question

<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)';

Answer 1

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

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

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

没有完成错误检查，但希望您明白这一点。

Answer 2

我很瘦，你想要执行ajax调用并输入

上的按钮

试试这个

<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>

Answer 3

要回答你的问题，我认为点击输入是将表单发送到浏览器，它必须是一个操作设置为GET的表单（或者没有，默认为GET）。这会导致浏览器刷新，并且表单变量在URL中显示为查询字符串。浏览器刷新可以防止您的脚本真正被执行（或者在页面重新加载时执行它，所以您没有看到它。）

如果e.preventDefault() Script() function Script(e)，则会阻止该默认操作发生。

[编辑] Gopal只是打败了我，给出了相同的答案。

我想补充说jQuery处理事件绑定和东西，也许为了更好的流程，你可以用{/ 1>替换$('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)';

然后你不需要.keypress()。几乎任何事件都有jQuery这样的函数.bind()（参见jQuery's keypress），您甚至可以使用{{1}}来绑定多个事件。请参阅documentation了解详情。

如何按下回车键使ajax javascript工作

3 个答案: