首页>>表单>>ajax 无刷新更新内容(2014-03-18)

ajax 无刷新更新内容

本例无更新数据库的部分，如果想要更新数据库可以参考本站其他的类似效果，例如《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》

ajax 无刷新更新内容
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1.     
  2.   <ul class="users">  
  3.     <li>  
  4.       <input type="text" name="user[]" value="Jimmi Westerberg" />  
  5.     </li>  
  6.     <li>  
  7.       <input type="text" name="user[]" value="Buddy Carlson" />  
  8.     </li>  
  9.     <li>  
  10.       <input type="text" name="user[]" value="Steve Martin" />  
  11.     </li>  
  12.     <li>  
  13.       <input type="text" name="user[]" value="Babe Ruth" />  
  14.     </li>  
  15.   </ul>  
  16.   
  17.   
  18.   <br/>  
  19.   <a name="save_on_the_go"></a>  
  20.     
  21.   
  22.   This will give the following editme field:  
  23.   <input type="text" id="most_options" value="Jimmi Westerberg" />  
  24.   <br/>  
  25.     
  26.   
  27.     
  28.    
  29. </div>  
  30.   
  31. <script type="text/javascript">  
  32. $(document).ready(function() {  
  33.   $('ul.users input').editme();  
  34.   
  35.   // uses the autosave option  
  36.   $('#save_me').editme({  
  37.     'autosave': function(data_to_save) {  
  38.       $.post(  
  39.         'save_data.json',  
  40.         data_to_save, function(data) {  
  41.           // do whatever you want with the data returned  
  42.           // ...  
  43.             
  44.             
  45.           // REMEMBER TO CALL THIS METHOD!  
  46.           // else the display view is not shown and it will be stuck at the   
  47.           // edit more.  
  48.           $('#save_me').editme('saved');  
  49.         }  
  50.       );  
  51.     }  
  52.   });  
  53.     
  54.   // uses most options as an example  
  55.   $('#most_options').editme({  
  56.     'edittext':'Edit me!',  
  57.     'removetext': 'Delete this row',  
  58.     'removeable':true,  
  59.     'savetext':'Save for later...',  
  60.     'canceltext':'Oopsie, cancel!'  
  61.   });  
  62. });  
  63. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_292.html