首页>>表单>>jquery简单的无刷新提交和删除评论(2013-11-07)

jquery简单的无刷新提交和删除评论

数据库结构非常简单，就是一个id和content就可以了

 

jquery简单的无刷新提交和删除评论
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <script type="text/javascript">  
  2.             $(function(){  
  3.                 //When the button with an id of submit is clicked (the submit button)  
  4.                 $("#submit").click(function(){  
  5.                   
  6.                 //Retrieve the contents of the textarea (the content)  
  7.                 var formvalue = $("#content").val();  
  8.                   
  9.                 //Build the URL that we will send  
  10.                 var url = 'submit=1&content=' + formvalue;  
  11.                   
  12.                 //Use jQuery's ajax function to send it  
  13.                  $.ajax({  
  14.                    type: "POST",  
  15.                    url: "process.php",  
  16.                    data: url,  
  17.                    success: function(){  
  18.                   
  19.                 //If successful , notify the user that it was added  
  20.                    $("#msg").html("<p class='add'>You just added: <i>" + formvalue + "</i></p>");  
  21.                    $("#content").val('');  
  22.                    todolist();  
  23.                    }  
  24.                  });  
  25.                   
  26.                 //We return false so when the button is clicked, it doesn't follow the action  
  27.                 return false;  
  28.                   
  29.                 });  
  30.               
  31.                 todolist();  
  32.             });  
  33.   
  34.             function todolist(){  
  35.                 $.ajax({  
  36.                   url: "process.php",  
  37.                   cache: false,  
  38.                   success: function(html){  
  39.                     $("#todolist").html(html);  
  40.                   }  
  41.                 });  
  42.             }  
  43.   
  44.         </script>  
  45.         <style type="text/css">  
  46.             *{  
  47.                 font: normal 14px/25px Helvetica, Arial, sans-serif;  
  48.                 color: #212121;  
  49.             }  
  50.             h1{  
  51.                 font-size: 20px;  
  52.                 font-weight: bold;  
  53.             }  
  54.             h2{  
  55.                 font-size: 16px;  
  56.                 font-weight: bold;  
  57.             }  
  58.             .list td{  
  59.                 border-bottom:1px solid;  
  60.             }  
  61.             .delete{  
  62.                 position: relative;  
  63.                 top: 5px;  
  64.             }  
  65.             .copy{  
  66.                 padding: 100px;  
  67.                 text-align: center;  
  68.                 font-size: 11px;  
  69.             }  
  70.             .copy a{  
  71.                 font-size: 11px;  
  72.             }  
  73.             .add{  
  74.                 font-weight: bold;  
  75.                 color: green;  
  76.             }  
  77.             .remove{  
  78.                 font-weight: bold;  
  79.                 color: red;  
  80.             }  
  81.             .msg{  
  82.                 width:80%;  
  83.             }  
  84.         </style>  
  85.         <table border="0" width="600px" cellpadding="0" cellspacing="0" align="center">  
  86.             <tr valign="top">  
  87.                 <td width="50%">  
  88.                     <h2>增加 :</h2>  
  89.                     <form id="form" action="process.php" method="post">  
  90.                         <textarea name="content" id="content" cols="30" rows="3"></textarea> <br />  
  91.                         <input type="submit" id="submit" name="submit" value="确定" />  
  92.                     </form>  
  93.                       
  94.                     <div class="msg" id="msg"></div>  
  95.                 </td>  
  96.                 <td width="50%">  
  97.                     <h2>列表 :</h2>  
  98.                     <div id="todolist"></div>  
  99.                 </td>  
  100.             </tr>  
  101.               
  102.         </table>      

 delete.php

 

PHP Code
  1. <?php  
  2.   
  3.     //Connect to the database  
  4.     include 'conn.php';  
  5.       
  6.     //delete.php?id=IdOfPost  
  7.     if($_POST['submit']){  
  8.     //if($_GET['id']){  
  9.     echo $id = $_POST['id'];  
  10.     //$id = $_GET['id'];  
  11.       
  12.     //Delete the record of the post  
  13.     $delete = mysql_query("DELETE FROM `add_delete_record` WHERE `id` = '$id'");  
  14.       
  15.     //Redirect the user  
  16.     header("Location:index.php");  
  17.       
  18.     }  
  19.   
  20. ?>  

process.php

 

PHP Code
  1. <?php  
  2.     //Connect to the database  
  3.     include 'conn.php';  
  4.       
  5.     //Was the form submitted?  
  6.     if($_POST['submit']){  
  7.       
  8.     //Map the content that was sent by the form a variable. Not necessary but it keeps things tidy.  
  9.     $content = $_POST['content'];  
  10.       
  11.     //Insert the content into database  
  12.     $ins = mysql_query("INSERT INTO `add_delete_record` (content) VALUES ('$content')");  
  13.       
  14.     //Redirect the user back to the index page  
  15.     header("Location:index.php");  
  16.     }  
  17.     /*Doesn't matter if the form has been posted or not, show the latest posts*/  
  18.       
  19.     //Find all the notes in the database and order them in a descending order (latest post first).  
  20.     $find = mysql_query("SELECT * FROM `add_delete_record` ORDER BY id DESC");  
  21.       
  22.     //Setup the un-ordered list  
  23.     echo '<table border="0" cellpadding="5" cellspacing="0" class="list" width="100%">'; 
  24.      
  25.     //Continue looping through all of them 
  26.     while($row = mysql_fetch_array($find)){ 
  27.      
  28.     //For each one, echo a list item giving a link to the delete page with it's id.  
  29.     echo '<tr><td valign="middle" width="90%">' . $row['content'] . ' </td> 
  30.         <td valign="middle" width="10%"><form id="form" action="delete.php?id=' . $row['id'] . '" method="post"> 
  31.         <input class="todo_id" name="todo_id" type="hidden" value="' . $row['id'] . '" /> 
  32.         <input class="todo_content" name="todo_content" type="hidden" value="'  . $row['content'] . '" /> 
  33.         <input type="image" src="images/delete.png" class="delete" name="delete" width="20px"  /> 
  34.          
  35.         </form> 
  36.         </td></tr>';  
  37.     }  
  38.       
  39.     //End the un-ordered list  
  40.     echo '</table>';  
  41. ?>  
  42. <script type="text/javascript">  
  43.     $(".delete").click(function(){  
  44.       
  45.         //Retrieve the contents of the textarea (the content)  
  46.         var todo_id = $(this).parent().find(".todo_id").val();  
  47.         var todo_content = $(this).parent().find(".todo_content").val();  
  48.           
  49.         //Build the URL that we will send  
  50.         var url = 'submit=1&id=' + todo_id;  
  51.           
  52.         //Use jQuery's ajax function to send it  
  53.          $.ajax({  
  54.            type: "POST",  
  55.            url: "delete.php",  
  56.            data: url,  
  57.            success: function(){  
  58.           
  59.         //If successful , notify the user that it was added  
  60.            $("#msg").html("<p class='remove'>You just deleted: <i>" + todo_content + "</i></p>");  
  61.            $("#content").val(''); 
  62.            todolist(); 
  63.            } 
  64.          }); 
  65.          
  66.         //We return false so when the button is clicked, it doesn't follow the action  
  67.         return false;  
  68.       
  69.     });  
  70.   
  71. </script>  

 


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