AJAX表单提交输入

当用户点击按钮时，一切正常。但是当他们进入时，页面只是重新加载。我究竟做错了什么？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>

感谢。

来源

2012-07-09 user1453094

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

起飞onclick并添加

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

到<form>。

event.preventDefault();prevent s提交表格（Default动作）。

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

来源

2012-07-09 00:44:39

感谢您的帮助，但它仍然只是重新加载页面。 '<形式行动= “” 名称= “形式” 方法= “POST” 的onsubmit = “得到（）;”> \t \t \t \t <输入类型=“submit”value =“Get”/> \t \t \t
' 我错过了什么吗？ – user1453094 2012-07-09 00:49:18

使用'onsubmit =“event.preventDefault（）; get（）;”'。 'preventDefault（）;'防止提交表单的默认动作。 – 2012-07-09 00:51:31

非常感谢！作品。 :) – user1453094 2012-07-09 00:53:13

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

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

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

最好的做法是使用jQuery（因为您正在使用它）分配事件，使用on()方法。

来源

2012-07-09 00:46:42 Styxxy

感谢您的帮助，但它仍然只是重新加载页面。 '<形式行动= “” 名称= “形式” 方法= “POST” 的onsubmit = “得到（）;”> \t \t \t \t <输入类型= “提交” 值= “获取”/> \t \t \t
' 我缺少的东西？ – user1453094 2012-07-09 00:50:06

@ user1453094您必须通过在函数get（）中返回false来防止实际页面刷新（提交）。 – Styxxy 2012-07-09 00:51:54

AJAX表单提交输入

回答

相关问题