AJAX表单提交回车

时间:2012-07-09 00:34:14

标签: php ajax

当用户点击按钮时,一切正常。但当他们点击进入时,页面才会重新加载。我做错了什么?

这是我的完整代码:

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

感谢。

2 个答案:

答案 0 :(得分:3)

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

取消onclick并添加

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

<form>

event.preventDefault(); prevent提交表单(Default操作)。

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

答案 1 :(得分:0)

当用户按Enter键时,将提交表单。您必须查找表单的onsubmit事件,而不是使用按钮的onclick事件。

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

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

最好使用jQuery(因为你还在使用它)使用on()方法分配事件。