ajax实现数据删除、查看详情功能
本文主要介绍了ajax实现数据删除、查看详情功能，具有很好的参考和学习ajax的价值。下面跟着小编一起来看下ajax实现数据删除、查看详情功能这篇文章吧
运用bootstrap,jquery和ajax显示一些数据，附加删除功能并且点击能弹出模态框详情功能
主页面main.php
<!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>
<link type="text/css" href="../FENGZHUANG/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> //引入bootstrap的css文件
<script src="../FENGZHUANG/jquery-3.1.1.min.js"></script> //先引入jquery的js文件
<script src="../FENGZHUANG/bootstrap/js/bootstrap.min.js"></script> //再引入其它的js文件
<style type="text/css">
.xq{ margin-left:30px}
</style>
</head>
<body>
<p class="page-header">
<h1>显示数据
</h1>
</p>
<table class="table table-hover">
<thead>
<tr>
<th width="30%">代号</th>
<th width="30%">名称</th>
<th width="40%">操作</th>
</tr>
</thead>
<tbody id="tb">
//用js向其中添加内容
</tbody>
</table>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">详细信息</h4>
</p>
<p class="modal-body" id="nr">
</p>
<p class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</p>
</p><!-- /.modal-content -->
</p><!-- /.modal -->
</p>
</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><button type='button' class='btn btn-info btn-sm sc' code='"+lie[0]+"'>删除</button><button type='button' class='btn btn-primary btn-sm xq' code='"+lie[0]+"'>查看</button></td></tr>";
}
$("#tb").html(str); //向tbody中输出内容
addshanchu();
addxiangqing();
}
});
}
//给删除按钮加事件的方法
function addshanchu()
{
//删除事件
$(".sc").click(function(){
var code = $(this).attr("code"); //获取删除按钮所在的数据的code
$.ajax({
url:"shanchu.php",
data:{code:code},
dataType:"TEXT",
type:"POST",
success: function(d){
if(d.trim()=="OK")
{
alert("删除成功");
Load(); //删除完需要加载数据
}
else
{
alert("删除失败");
}
}
});
})
}
//给查看详情加事件的方法
function addxiangqing()
{
$(".xq").click(function(){
//显示模态框
$('#myModal').modal('show');
//在模态框里面显示内容
var code = $(this).attr("code"); //获取哪一条数据
$.ajax({
url:"xiangqing.php",
data:{code:code},
dataType:"TEXT",
type:"POST",
success:function(data){
var lie = data.split("^");
var str = "<p>民族代号："+lie[0]+"</p><p>民族名称："+lie[1]+"</p>";
$("#nr").html(str);
}
});
})
}
</script>
</html>加载数据的页面jiazai.php
<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation order by code ASC";
$arr = $db->Query($sql);
// 下面实现的字符串是类似这样的n001^汉族|n002^回族|n003^苗族
$str = "";返回主页面的数据是TEXT型，得转换一下
foreach($arr as $v)
{
$str = $str.implode("^",$v)."|"; //拼接字符串
}
$str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。
echo $str;删除处理页面shanchu.php
<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$code = $_POST["code"];
$sql = "delete from nation where code='{$code}'";
if($db->Query($sql,0))
{
echo "OK";
}
else
{
echo "NO";
}查看详情页面xiangqing.php
<?php
$code = $_POST["code"];
include("../fengzhuang/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation where code='{$code}'";
echo $db->StrQuery($sql);以上就是本篇文章的所有内容了，希望对大家学习所有帮助！！
相关推荐：
以上是ajax实现数据删除、查看详情功能的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
微信拉黑再删除永久加不上是真的吗
Apr 08, 2024 am 11:41 AM
1、首先，拉黑再删除永久加不上是假的，拉黑删除后想要再加对方，只要对方同意即可。2、如果用户将某人拉黑，对方将无法向用户发送消息、查看用户的朋友圈以及与用户进行通话。3、拉黑并不意味着将对方从用户的微信联系人列表中删除。4、如果用户在拉黑后又将对方从用户的微信联系人列表中删除，那么在删除后是没有办法恢复的。5、如果用户想再次添加对方为好友，需要对方同意并重新添加用户。
抖音查看删除登录设备的操作步骤
Mar 26, 2024 am 09:01 AM
1、首先点击打开抖音app，点击【我】。2、点击右上方三点的图标。3、点击进入【设置】。4、点击打开【帐号与安全】。5、选择点击【登录设备管理】。6、最后点击选择其中的设备，点击【移除】即可。
抖音聊天记录怎么彻底消除干净
May 07, 2024 am 11:14 AM
1、打开抖音app，点击界面底部的【消息】，点击需要删除的聊天对话入口。2、长按任意一条聊天记录，点击【多选】，勾选想要删除的聊天记录。3、点击右下角的【删除】按钮，在弹出的窗口中选择【确认删除】即可将这些记录永久删除。
抖音上如何发给别人文件？上发给别人文件怎么删除？
Mar 22, 2024 am 08:30 AM
在抖音上，用户不仅可以分享自己的生活点滴和才艺，还可以和其他用户互动交流。在这个过程中，有时候我们需要向其他用户发送文件，比如图片、视频等。那么，在抖音上如何发给别人文件呢？一、抖音上如何发给别人文件？1.打开抖音，进入你想要发送文件的聊天界面。2.点击聊天界面中的“+”号，选择“文件”。3.在文件选项中，你可以选择发送图片、视频、音频等文件。选择你想要发送的文件后，点击“发送”。4.等待对方接受你的文件，一旦对方接受，文件就会传输成功。二、抖音上发给别人文件怎么删除？1.打开抖音，进入你发送文
小红书把别人评论删了怎么找回？把别人评论删了会有显示吗？
Mar 21, 2024 pm 10:46 PM
小红书作为一款热门的社交电商平台，用户之间的互动评论是平台中不可或缺的交流方式。有时候，我们可能会发现自己的评论被其他人删除，这种情况可能会让我们感到困惑。一、小红书把别人评论删了怎么找回？当发现自己的评论被删除时，首先可以尝试在平台上直接搜索相关的帖子或商品，查看是否还能找到该评论。如果评论被删除后仍然显示，那么可能是被原帖主删除的，这时候可以尝试联系原帖主，询问其删除评论的原因，并请求恢复评论。如果评论已经被完全删除且无法在原帖上找到，那么在平台上恢复评论的机会相对较小。可以尝试使用其他途径
闲鱼怎么查看自己的id_闲鱼个人昵称查看方法介绍
Mar 22, 2024 am 08:21 AM
闲鱼作为一款交易平台，使用之前都需要先注册和登录自己的账号，用户可以为自己的账号设置id名称，如果想查看自己的id是什么怎么办呢？下面就来一起了解一下吧！闲鱼个人昵称查看方法介绍首先启动闲鱼应用，进入首页后，通过切换到卖闲置、消息、我的页面，点击右下角的【我的】选项。2、然后在我的页面中我们需要点击左上角的【头像】；2、接着来到个人主页的页面中可以看到不同的信息，我们需要在这里点击【编辑资料】按钮；4、最后点击过后在编辑资料的页面中我们就可以看到了；
网易云音乐在哪查看音乐排行榜_网易云音乐查看音乐排行榜方法
Mar 25, 2024 am 11:40 AM
1、打开手机后，选择网易云音乐。2、进入到首页后，大家就可以看到【排行榜】，点击进入。3、在排行榜中，可以选择任意榜单，点击【新歌榜】。4、选择自己喜欢的歌曲，并进行点击。5、返回上一页，可以看到更多的榜单。
PHP实用技巧：删除代码中的最后一个分号
Mar 27, 2024 pm 02:24 PM
PHP实用技巧：删除代码中的最后一个分号在编写PHP代码时，常常会遇到需要删除代码中最后一个分号的情况。这可能是因为复制粘贴引入了多余的分号，或者为了优化代码风格和结构。在本文中，我们将介绍一些方法来删除PHP代码中的最后一个分号，并且提供具体的代码示例。方法一：使用substr函数substr函数可以从字符串中返回指定长度的子字符串。我们可以
