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;
index.php
js文件
JavaScript Code复制内容到剪贴板
- <script type="text/javascript">
- $(document).ready(function() {
- //##### send add record Ajax request to response.php #########
- $("#FormSubmit").click(function (e) {
- e.preventDefault();
- if($("#contentText").val()==='')
- {
- alert("请输入内容!");
- return false;
- }
- var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure
- jQuery.ajax({
- type: "POST", // HTTP method POST or GET
- url: "response.php", //Where to make Ajax calls
- dataType:"text", // Data type, HTML, json etc.
- data:myData, //Form variables
- success:function(response){
- $("#responds").append(response);
- $("#contentText").val(''); //empty text field on successful
- },
- error:function (xhr, ajaxOptions, thrownError){
- alert(thrownError);
- }
- });
- });
- //##### Send delete Ajax request to response.php #########
- $("body").on("click", "#responds .del_button", function(e) {
- e.returnValue = false;
- var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
- var DbNumberID = clickedID[1]; //and get number from array
- var myData = 'recordToDelete='+ DbNumberID; //build a post data structure
- jQuery.ajax({
- type: "POST", // HTTP method POST or GET
- url: "response.php", //Where to make Ajax calls
- dataType:"text", // Data type, HTML, json etc.
- data:myData, //Form variables
- success:function(response){
- //on success, hide element user wants to delete.
- $('#item_'+DbNumberID).fadeOut("slow");
- },
- error:function (xhr, ajaxOptions, thrownError){
- //On error, we alert user
- alert(thrownError);
- }
- });
- });
- });
- </script>
主要代码
XML/HTML Code复制内容到剪贴板
- <div class="content_wrapper">
- <ul id="responds">
- <?php
- //include db configuration file
- include_once("conn.php");
- //MySQL query
- $Result = mysql_query("SELECT id,content FROM add_delete_record");
- //get all records from add_delete_record table
- while($row = mysql_fetch_array($Result))
- {
- echo '<li id="item_'.$row["id"].'">';
- echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$row["id"].'">';
- echo '<img src="images/icon_del.gif" border="0" />';
- echo '</a></div>';
- echo $row["content"].'</li>';
- }
- ?>
- </ul>
- <div class="form_style">
- <textarea name="content_txt" id="contentText" cols="45" rows="5" ></textarea>
- <button id="FormSubmit">添加</button>
- </div>
- </div>
response.php
PHP Code复制内容到剪贴板
- <?php
- //include db configuration file
- include_once("conn.php");
- if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0)
- { //check $_POST["content_txt"] is not empty
- //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH Strip tags, encode special characters.
- $contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
- // Insert sanitize string in record
- if(mysql_query("INSERT INTO add_delete_record(content) VALUES('".$contentToSave."')"))
- {
- //Record was successfully inserted, respond result back to index page
- $my_id = mysql_insert_id(); //Get ID of last inserted row from MySQL
- echo '<li id="item_'.$my_id.'">';
- echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">';
- echo '<img src="images/icon_del.gif" border="0" />';
- echo '</a></div>';
- echo $contentToSave.'</li>';
- }else{
- //header('HTTP/1.1 500 '.mysql_error()); //display sql errors.. must not output sql errors in live mode.
- header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
- exit();
- }
- }
- elseif(isset($_POST["recordToDelete"]) && strlen($_POST["recordToDelete"])>0 && is_numeric($_POST["recordToDelete"]))
- { //do we have a delete request? $_POST["recordToDelete"]
- //sanitize post value, PHP filter FILTER_SANITIZE_NUMBER_INT removes all characters except digits, plus and minus sign.
- $idToDelete = filter_var($_POST["recordToDelete"],FILTER_SANITIZE_NUMBER_INT);
- //try deleting record using the record ID we received from POST
- if(!mysql_query("DELETE FROM add_delete_record WHERE id=".$idToDelete))
- {
- //If mysql delete query was unsuccessful, output error
- header('HTTP/1.1 500 Could not delete record!');
- exit();
- }
- }
- else
- {
- //Output error
- header('HTTP/1.1 500 Error occurred, Could not process request!');
- exit();
- }
- ?>
相关推荐
Ajax实现无刷新添加和删除数据
Ajax实现无刷新添加和删除数据.zip
Ajax实现无刷新添加和删除数据源码.zip
Ajax实现无刷新添加和删除数据jQueryTest
ajax添加和删除无刷新效果
添加和删除记录是Asp.net处理数据常用的功能。用Asp.net服务器控件,都要刷新页面。这样消耗了我们等待时间。而结合Jquery+Ajax却节省了我们...本实例是是很不错的实现Asp.net对数据库添加/删除数据,很不错的例子。
ajax实现无刷新对数据库的操作 ========================================= 功能:ajax实现无刷新对数据库的操作 有添加、删除、修改、分页 使用的是jquery框架 作者:wangsdong 来源:www.aspprogram.cn 文章为作者...
摘要:脚本资源,Ajax/JavaScript,Ajax,无刷新 运用jQuery实现的Ajax无刷新删除和添加数据的表单,可适时删除表格、修改表格内容、添加内容,实现了前端的功能,当然如果需要全部实现,则需要后台脚本语言的支持。...
ajax 无刷新 实现数据库添加删除等 比较全面 包括删除添加等
基于jquery的ajax功能,对ASP网站的数据库进行无刷新操作,包括对数据库内容进行添加,删除,修改,分页
VS2008 编写 基于Jquey ajax 开发的表格控件 能够自定义表头,编辑、添加、删除、统计 数据全都是 json 格式 还能实现 在 表格里插入时间
内容索引:.NET源码,Ajax相关,jQuery,无刷新提交 jQuery+XML+无刷新添加删除数据,还可以简单进行分页,本程序的数据存储介质为XML,只是为了演示jQuery的功能,有兴趣的朋友可以修改完善,转换为数据库版。...
Ajax与ASP网页交互动态添加删除数据一例 Asp+Ajax无限级联动下拉框菜单Access版 ASP 树形菜单TreeView 多样式版 Ajax仿iGoogle双击编辑、网页拖动完整实例 ASP+jQuery无刷新读写数据库操作 Ajax提交数据实例_Ajax+...
1.完整的包命名空间 2.自定义header footer ...14.无变化重新刷新整个树Refresh 15.支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现
jQuery AJAX表格控件(初版)源码 测试版 JQUERY 实现的AJAX表格操作控件 设计上需要改进 初步功能已实现 边个实现了数据库的添加 编辑 删除等基本功能 详细请查看代码
实例22 mysql类库完成MySQL数据库的添加、删除和修改 实例23 mysqli类库完成MySQL数据库的添加、删除和查询 实例24 获取服务器和系统信息 实例25 分页显示信息 实例26 使用PHP简单实现BBS程序 实例27 使用0DBC函数库...
实例22 mysql类库完成MySQL数据库的添加、删除和修改 实例23 mysqli类库完成MySQL数据库的添加、删除和查询 实例24 获取服务器和系统信息 实例25 分页显示信息 实例26 使用PHP简单实现BBS程序 实例27 使用0DBC...
当我们正在开发一个“数据操作页面”,我们几乎总是做同样的事情:“表/网格”,用于“显示记录的数据库表,一个“创建新记录”页面/对话框来添加一个新的记录到数据库,一个“编辑记录”页面/对话框编辑记录,最后一个...
09/9.5.1.html 表格操作范例 09/9.5.5.html 添加单元格范例 09/9.5.8.html 删除行和单元格范例 09/9.5.9.html 交换两行的位置范例 <br>第10章 10/10.1.3.html CSS在Ajax开发中的作用...