AJAX 表单提交回车答案

【问题标题】：AJAX Form Submit With EnterAJAX 表单提交回车
【发布时间】：2012-07-09 00:34:14
【问题描述】：

当用户点击按钮时，一切正常。但是当他们按下回车键时，页面就会重新加载。我做错了什么？

这是我的完整代码：

<!doctype html>
<html>
<head>
    <title>Fun!</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <link rel="stylesheet" href="" media="print" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

    <style type="text/css">
        body {
            font-family: arial;
        }
    </style>

    <script type="text/javascript">
        function get() {
            $.post('data.php', { name: form.name.value }, 
                function(output) {
                    $('#age').html(output).show();
                }
            );
        }
    </script>
</head>

<body>
    <div class="container">
        <form action="" name="form" method="post">
            <input type="text" name="name" /> <input type="button" value="Get" onClick="get();" />
        </form><br />

        <div id="age" style="display: none;">Result</div>
    </div>
</body>
</html>

谢谢。

【问题讨论】：

标签： php ajax

【解决方案1】：

您正在为按钮设置onclick 事件，当按下 Enter 时这将不起作用，因为它不是点击。

脱掉onclick并添加

onsubmit="event.preventDefault();get();return false;"

到<form>。

event.preventDefault();prevents 提交表单（Default 操作）。

return false; 用于旧版本的 Internet Explorer，因为它们不支持 e.preventDefault();。现代浏览器会忽略return false;。

【讨论】：

感谢您的帮助，但它仍然只是重新加载页面。 <form action="" name="form" method="post" onsubmit="get();"> <input type="text" name="name" /> <input type="submit" value="Get" /> </form><br />我错过了什么吗？
使用onsubmit="event.preventDefault();get();"。 preventDefault(); 阻止提交表单的默认操作。

【解决方案2】：

当用户按下回车键时，表单将被提交。您必须寻找表单的onsubmit 事件，而不是使用按钮的onclick 事件。

<form ... onsubmit="get();">
    ...
</form>

现在您还必须防止页面实际提交（因为您是使用 AJAX 完成的）。在函数get()末尾添加return false;。

最好使用 jQuery 分配事件（因为无论如何你都在使用它），使用 on() 方法。

【讨论】：

感谢您的帮助，但它仍然只是重新加载页面。 <form action="" name="form" method="post" onsubmit="get();"> <input type="text" name="name" /> <input type="submit" value="Get" /> </form><br />我错过了什么吗？
@user1453094 您必须通过在函数 get() 中返回 false 来防止真正的页面刷新（提交）。