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表單提交輸入

回答

相關問題