ajax 无刷新更新内容

ajax 无刷新更新内容

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

演示

 

 

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