表單提交無刷新頁面

Question

有人能告訴我使用jQuery的無刷新頁面顯示成功的表單提交的教程。類似的情況發生在gmail上，當一個消息被傳遞時，黃色的覆蓋圖顯示你的消息已被傳遞，然後淡出。 我希望顯示的消息取決於表單提交的結果。

Answer 1

好吧......這樣的事情......但我沒有嘗試...所以使用它，就像教程。您也可以使用JSON

JS：

function processForm() { 
     $.ajax({ 
      type: 'POST', 
      url: form_process.php, 
      data: 'user_name=' + encodeURIComponent(document.getElementById('user_name').value), 
      success: function(data) { 
       $('#message').html(data); 
      } 
     }); 
} 

HTML：

<form action="" method="post" onsubmit="processForm();return false;"> 
<input type='text' name='user_name' id='user_name' value='' /> 
<input type='submit' name='submit' value='submit'/> 
</form> 
<div id='message'></div> 

form_process.php

$user_name = $_POST['user_name']; 
if(do something){ 
    echo "login success"; 
else{ 
    echo "login unsuccessful"; 
} 

Answer 2

jatt的答案几乎是正確的。但不要忘記將url屬性設置爲'' 這可能會節省您幾分鐘的調試時間，希望能夠