ajax不跳转页面的快速删除操作,可添加美观样式
2017-03-11 21:19
363 查看
以前我们讲的删除是利用嵌入php代码,跳转到另一个页面,从而降低了删除速度,但我们今天讲的利用ajax不仅可以达到不跳页面快速删除,并且能添加特效来美化页面。
上代码,我们先来做主页面
主页中,ajax引用的加载页面
效果如下图
接着我们删除处理页面
利用ajax做删除就是如此简单啦。。。。
上代码,我们先来做主页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="../jquery-1.11.2.min.js"></script> </head> <body> <h1>显示数据</h1> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>代号</td> <td>名称</td> <td>操作</td> </tr> <tbody id="tb"> </tbody> </table> </body> <script type="text/javascript"> //加载数据 Load(); //加载数据的方法 function Load() { $.ajax({ url:"jiazai.php", dataType:"TEXT", success: function(data){ var str = ""; var hang = data.split("|"); for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><input type='button' code='"+lie[0]+"' value='删除' class='sc' /></td></tr>"; } $("#tb").html(str); //删除事件 $(".sc").click(function(){ var code = $(this).attr("code"); $.ajax({ url:"shanchu.php", data:{code:code}, dataType:"TEXT", type:"POST", success: function(d){ if(d.trim()=="OK") { alert("删除成功"); Load(); } else { alert("删除失败"); } } }); }) } }); } </script> </html>
主页中,ajax引用的加载页面
<?php include("../LZY.class.php"); $db = new LZY(); $sql = "select * from nation"; $arr = $db->Query($sql); $str = ""; foreach($arr as $v) { $str = $str.implode("^",$v)."|"; } $str = substr($str,0,strlen($str)-1); echo $str;
效果如下图
接着我们删除处理页面
<?php include("../LZY.class.php"); $db = new LZY(); $code = $_POST["code"]; $sql = "delete from nation where code='{$code}'"; if($db->Query($sql,0)) { echo "OK"; } else { echo "NO"; }
利用ajax做删除就是如此简单啦。。。。
相关文章推荐
- GridView分页后跳转其他页面进行添加,编辑,删除操作后,仍返回到当前页码
- ajax动态添加tr td (并用PHP返回值设置tr样式,用于删除操作
- GridView分页后跳转其他页面进行添加,编辑,删除操作后,仍返回到当前页码[原]
- 在JSP中,当添加信息成功后跳转回主页面并弹出操作成功提示框
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- JSF 2.0简介:Ajax对页面的增加与删除操作例子
- 连接数据库实现添加,删除,修改,AJAX异步,分页,查询等操作,
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- 给当前页或者跳转后页面的导航栏添加选中样式
- JS操作页面表格内容的添加与删除
- 用Ajax实现分页和删除操作的jsp页面源代码
- zTree插件和layer弹出层结合进行添加,删除,修改操作时,针对出现调用父父页面方法出现问题,解决方法
- 点击菜单跳转页面给点击的菜单添加新的样式
- 退出后点击浏览器后退不能回到成功页面;直接进入页面和跳转进入页面样式不同;防止直接输入页面地址或servlet;当servlet跳servlet时,进行其他操作后后退出现错误!
- repeater实现样式设置,并添加删除按钮,参考课上老师做的案例。数据表添加字段status,使用repeater实现禁用与启用。repeater添加编辑按钮,和Edit.aspx页面。
- 使用ajax来实现数据的添加删除查询并能操作表格
- 问题二-jsp页面几个常用操作(添加一行、删除、取消修改、保存、修改)-js代码(OK)
- Jquery给当前页或者跳转后页面的导航栏添加选中后样式