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