首页>>表单>>类似facebook无刷新ajax更新(2013-12-02)

类似facebook无刷新ajax更新

类似facebook无刷新ajax更新
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <script type="text/javascript">  
  2. $(document).ready(function()  
  3. {  
  4.   
  5. $('.edit_link').click(function()  
  6. {  
  7. $('.text_wrapper').hide();  
  8. var data=$('.text_wrapper').html();  
  9. $('.edit').show();  
  10. $('.editbox').html(data);  
  11. $('.editbox').focus();  
  12. });  
  13.   
  14. $(".editbox").mouseup(function()   
  15. {  
  16. return false  
  17. });  
  18.   
  19. $(".editbox").change(function()   
  20. {  
  21. $('.edit').hide();  
  22. var boxval = $(".editbox").val();  
  23. var dataString = 'data='+ boxval;  
  24. $.ajax({  
  25. type: "POST",  
  26. url: "update_profile_ajax.php",  
  27. data: dataString,  
  28. cache: false,  
  29. success: function(html)  
  30. {  
  31. $('.text_wrapper').html(boxval);  
  32. $('.text_wrapper').show();  
  33.   
  34. }  
  35. });  
  36.   
  37. });  
  38.    
  39. $(document).mouseup(function()  
  40. {  
  41. $('.edit').hide();  
  42. $('.text_wrapper').show();  
  43. });  
  44.   
  45. });  
  46. </script>  
  47. <style type="text/css">  
  48. body  
  49. {  
  50. font-family:Arial, Helvetica, sans-serif;  
  51.   
  52. font-size:12px;  
  53. }  
  54. .mainbox  
  55. {  
  56. width:250px;  
  57. margin:50px;  
  58. }  
  59. .text_wrapper  
  60. {  
  61. border:solid 1px #0099CC;  
  62. padding:5px;  
  63. width:187px;  
  64.   
  65.   
  66.   
  67. }  
  68. .edit_link  
  69. {  
  70. float:right  
  71. }  
  72. .editbox  
  73. {  
  74. overflow: hidden; height: 61px;border:solid 1px #0099CC; width:190px; font-size:12px;font-family:Arial, Helvetica, sans-serif; padding:5px  
  75. }  
  76. </style>  
  77. <div class="mainbox">  
  78. <a href="#" class="edit_link" title="Edit">Edit</a>  
  79. <?php  
  80. include("db.php");  
  81. $sql=mysql_query("select email from users where user_id='1'");  
  82. $row=mysql_fetch_array($sql);  
  83. $profile=$row['email'];  
  84. ?>  
  85. <div class="text_wrapper" style=""><?php echo $profile; ?></div>  
  86.   
  87.   
  88. <div class="edit" style="display:none"><textarea class="editbox" cols="23" rows="3"   name="profile_box"></textarea></div>  
  89.   
  90. </div>  

 update_profile_ajax.php

 

PHP Code
  1. <?php  
  2.   
  3. if($_POST['data'])  
  4. {  
  5. $data=$_POST['data'];  
  6. $data = mysql_escape_String($data);  
  7. $sql = "update users set email='$data' where user_id='1'";  
  8. mysql_query( $sql);  
  9. }  
  10. ?>  

 


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