jquery表單提交

Question

有人可以教我如何使用jquery來顯示成功的表單提交而不刷新頁面。 類似的情況發生在gmail上，當一個消息被傳遞時，黃色覆蓋圖顯示你的消息已經被傳遞，然後淡出。

Answer 1

使用jQuery + JSON組合是這樣的：

test.php的：

<script type="text/javascript" src="jquery-1.4.2.js"></script> 
<script type="text/javascript" src="jsFile.js"></script> 

<form action='_test.php' method='post' class='ajaxform'> 
<input type='text' name='txt' value='Test Text'> 
<input type='submit' value='submit'> 
</form> 

<div id='testDiv'></div> 

_test.php：

<?php 
     // Code here to deal with your form submitted data. 
     $arr = array('testDiv' => 'Form is successfully submitted.'); 
     echo json_encode($arr); 
?> 

jsFile.js：

jQuery(document).ready(function(){ 

    jQuery('.ajaxform').submit(function() { 

     $.ajax({ 
      url  : $(this).attr('action'), 
      type : $(this).attr('method'), 
      dataType: 'json', 
      data : $(this).serialize(), 
      success : function(data) { 
         for(var id in data) { 
          jQuery('#' + id).html(data[id]); 
         } 
         } 
     }); 

     return false; 
    }); 

}); 

---

OR：

您可以使用jQuery Form Plugin