首页>>表单>>ajax 无刷新添加和删除数据(2013-09-04)

ajax 无刷新添加和删除数据

本例是ajax无刷新提交表单，无刷新删除记录，可以用于评论，当然本例只是一个最基本的案例，具体的要在实际中添加多一些字段

数据库结构

CREATE TABLE `add_delete_record` (

  `id` int(11) NOT NULL auto_increment,

  `content` varchar(5) character set utf8 collate utf8_unicode_ci NOT NULL,

  PRIMARY KEY  (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

ajax 无刷新添加和删除数据
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 index.php 

js文件

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.   
  4.     //##### send add record Ajax request to response.php #########  
  5.     $("#FormSubmit").click(function (e) {  
  6.             e.preventDefault();  
  7.             if($("#contentText").val()==='')  
  8.             {  
  9.                 alert("请输入内容!");  
  10.                 return false;  
  11.             }  
  12.             var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure  
  13.             jQuery.ajax({  
  14.             type: "POST", // HTTP method POST or GET  
  15.             url: "response.php", //Where to make Ajax calls  
  16.             dataType:"text", // Data type, HTML, json etc.  
  17.             data:myData, //Form variables  
  18.             success:function(response){  
  19.                 $("#responds").append(response);  
  20.                 $("#contentText").val(''); //empty text field on successful  
  21.             },  
  22.             error:function (xhr, ajaxOptions, thrownError){  
  23.                 alert(thrownError);  
  24.             }  
  25.             });  
  26.     });  
  27.   
  28.     //##### Send delete Ajax request to response.php #########  
  29.     $("body").on("click", "#responds .del_button", function(e) {  
  30.          e.returnValue = false;  
  31.          var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)  
  32.          var DbNumberID = clickedID[1]; //and get number from array  
  33.          var myData = 'recordToDelete='+ DbNumberID; //build a post data structure  
  34.            
  35.             jQuery.ajax({  
  36.             type: "POST", // HTTP method POST or GET  
  37.             url: "response.php", //Where to make Ajax calls  
  38.             dataType:"text", // Data type, HTML, json etc.  
  39.             data:myData, //Form variables  
  40.             success:function(response){  
  41.                 //on success, hide  element user wants to delete.  
  42.                 $('#item_'+DbNumberID).fadeOut("slow");  
  43.             },  
  44.             error:function (xhr, ajaxOptions, thrownError){  
  45.                 //On error, we alert user  
  46.                 alert(thrownError);  
  47.             }  
  48.             });  
  49.     });  
  50.   
  51. });  
  52. </script>  

 主要代码

XML/HTML Code复制内容到剪贴板
  1. <div class="content_wrapper">  
  2.   
  3. <ul id="responds">  
  4.   
  5. <?php  
  6.   
  7. //include db configuration file  
  8.   
  9. include_once("conn.php");  
  10.   
  11.   
  12.   
  13. //MySQL query  
  14.   
  15. $Result = mysql_query("SELECT id,content FROM add_delete_record");  
  16.   
  17.    
  18.   
  19. //get all records from add_delete_record table  
  20.   
  21. while($row = mysql_fetch_array($Result))  
  22.   
  23. {  
  24.   
  25.   echo '<li id="item_'.$row["id"].'">';  
  26.   
  27.   echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$row["id"].'">';  
  28.   
  29.   echo '<img src="images/icon_del.gif" border="0" />';  
  30.   
  31.   echo '</a></div>';  
  32.   
  33.   echo $row["content"].'</li>';  
  34.   
  35. }  
  36.   
  37.    
  38.   
  39.    
  40.   
  41. ?>  
  42.   
  43. </ul>  
  44.   
  45.     <div class="form_style">  
  46.   
  47.     <textarea name="content_txt" id="contentText" cols="45" rows="5" ></textarea>  
  48.   
  49.     <button id="FormSubmit">添加</button>  
  50.   
  51.     </div>  
  52.   
  53. </div>  

 response.php

 

PHP Code复制内容到剪贴板
  1. <?php  
  2. //include db configuration file  
  3. include_once("conn.php");  
  4.   
  5. if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0)   
  6. {   //check $_POST["content_txt"] is not empty  
  7.   
  8.     //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH Strip tags, encode special characters.  
  9.     $contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);   
  10.       
  11.     // Insert sanitize string in record  
  12.     if(mysql_query("INSERT INTO add_delete_record(content) VALUES('".$contentToSave."')"))  
  13.     {  
  14.          //Record was successfully inserted, respond result back to index page  
  15.           $my_id = mysql_insert_id(); //Get ID of last inserted row from MySQL  
  16.           echo '<li id="item_'.$my_id.'">';  
  17.           echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">';  
  18.           echo '<img src="images/icon_del.gif" border="0" />';  
  19.           echo '</a></div>';  
  20.           echo $contentToSave.'</li>';  
  21.            
  22.   
  23.     }else{  
  24.           
  25.         //header('HTTP/1.1 500 '.mysql_error()); //display sql errors.. must not output sql errors in live mode.  
  26.         header('HTTP/1.1 500 Looks like mysql error, could not insert record!');  
  27.         exit();  
  28.     }  
  29.   
  30. }  
  31. elseif(isset($_POST["recordToDelete"]) && strlen($_POST["recordToDelete"])>0 && is_numeric($_POST["recordToDelete"]))  
  32. {   //do we have a delete request? $_POST["recordToDelete"]  
  33.   
  34.     //sanitize post value, PHP filter FILTER_SANITIZE_NUMBER_INT removes all characters except digits, plus and minus sign.  
  35.     $idToDelete = filter_var($_POST["recordToDelete"],FILTER_SANITIZE_NUMBER_INT);   
  36.       
  37.     //try deleting record using the record ID we received from POST  
  38.     if(!mysql_query("DELETE FROM add_delete_record WHERE id=".$idToDelete))  
  39.     {      
  40.         //If mysql delete query was unsuccessful, output error   
  41.         header('HTTP/1.1 500 Could not delete record!');  
  42.         exit();  
  43.     }  
  44.       
  45. }  
  46. else  
  47. {  
  48.     //Output error  
  49.     header('HTTP/1.1 500 Error occurred, Could not process request!');  
  50.     exit();  
  51. }  
  52. ?>  

 


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