怎么用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);相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是怎么用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)
热门话题
开源！超越ZoeDepth！ DepthFM：快速且精确的单目深度估计！
Apr 03, 2024 pm 12:04 PM
0.这篇文章干了啥？提出了DepthFM：一个多功能且快速的最先进的生成式单目深度估计模型。除了传统的深度估计任务外，DepthFM还展示了在深度修复等下游任务中的最先进能力。DepthFM效率高，可以在少数推理步骤内合成深度图。下面一起来阅读一下这项工作~1.论文信息标题：DepthFM:FastMonocularDepthEstimationwithFlowMatching作者：MingGui,JohannesS.Fischer,UlrichPrestel,PingchuanMa,Dmytr
微信拉黑再删除永久加不上是真的吗
Apr 08, 2024 am 11:41 AM
1、首先，拉黑再删除永久加不上是假的，拉黑删除后想要再加对方，只要对方同意即可。2、如果用户将某人拉黑，对方将无法向用户发送消息、查看用户的朋友圈以及与用户进行通话。3、拉黑并不意味着将对方从用户的微信联系人列表中删除。4、如果用户在拉黑后又将对方从用户的微信联系人列表中删除，那么在删除后是没有办法恢复的。5、如果用户想再次添加对方为好友，需要对方同意并重新添加用户。
谷歌狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理训练最快选择
Apr 01, 2024 pm 07:46 PM
谷歌力推的JAX在最近的基准测试中性能已经超过Pytorch和TensorFlow，7项指标排名第一。而且测试并不是在JAX性能表现最好的TPU上完成的。虽然现在在开发者中，Pytorch依然比Tensorflow更受欢迎。但未来，也许有更多的大模型会基于JAX平台进行训练和运行。模型最近，Keras团队为三个后端（TensorFlow、JAX、PyTorch）与原生PyTorch实现以及搭配TensorFlow的Keras2进行了基准测试。首先，他们为生成式和非生成式人工智能任务选择了一组主流
iPhone上的蜂窝数据互联网速度慢：修复
May 03, 2024 pm 09:01 PM
在iPhone上面临滞后，缓慢的移动数据连接？通常，手机上蜂窝互联网的强度取决于几个因素，例如区域、蜂窝网络类型、漫游类型等。您可以采取一些措施来获得更快、更可靠的蜂窝互联网连接。修复1–强制重启iPhone有时，强制重启设备只会重置许多内容，包括蜂窝网络连接。步骤1–只需按一次音量调高键并松开即可。接下来，按降低音量键并再次释放它。步骤2–该过程的下一部分是按住右侧的按钮。让iPhone完成重启。启用蜂窝数据并检查网络速度。再次检查修复2–更改数据模式虽然5G提供了更好的网络速度，但在信号较弱
抖音聊天记录怎么彻底消除干净
May 07, 2024 am 11:14 AM
1、打开抖音app，点击界面底部的【消息】，点击需要删除的聊天对话入口。2、长按任意一条聊天记录，点击【多选】，勾选想要删除的聊天记录。3、点击右下角的【删除】按钮，在弹出的窗口中选择【确认删除】即可将这些记录永久删除。
超级智能体生命力觉醒！可自我更新的AI来了，妈妈再也不用担心数据瓶颈难题
Apr 29, 2024 pm 06:55 PM
哭死啊，全球狂炼大模型，一互联网的数据不够用，根本不够用。训练模型搞得跟《饥饿游戏》似的，全球AI研究者，都在苦恼怎么才能喂饱这群数据大胃王。尤其在多模态任务中，这一问题尤为突出。一筹莫展之际，来自人大系的初创团队，用自家的新模型，率先在国内把“模型生成数据自己喂自己”变成了现实。而且还是理解侧和生成侧双管齐下，两侧都能生成高质量、多模态的新数据，对模型本身进行数据反哺。模型是啥？中关村论坛上刚刚露面的多模态大模型Awaker1.0。团队是谁？智子引擎。由人大高瓴人工智能学院博士生高一钊创立，高
美国空军高调展示首个AI战斗机！部长亲自试驾全程未干预，10万行代码试飞21次
May 07, 2024 pm 05:00 PM
最近，军事圈被这个消息刷屏了：美军的战斗机，已经能由AI完成全自动空战了。是的，就在最近，美军的AI战斗机首次公开，揭开了神秘面纱。这架战斗机的全名是可变稳定性飞行模拟器测试飞机（VISTA），由美空军部长亲自搭乘，模拟了一对一的空战。5月2日，美国空军部长FrankKendall在Edwards空军基地驾驶X-62AVISTA升空注意，在一小时的飞行中，所有飞行动作都由AI自主完成！Kendall表示——在过去的几十年中，我们一直在思考自主空对空作战的无限潜力，但它始终显得遥不可及。然而如今，
特斯拉机器人进厂打工，马斯克：手的自由度今年将达到22个！
May 06, 2024 pm 04:13 PM
特斯拉机器人Optimus最新视频出炉，已经可以在厂子里打工了。正常速度下，它分拣电池（特斯拉的4680电池）是这样的：官方还放出了20倍速下的样子——在小小的“工位”上，拣啊拣啊拣：这次放出的视频亮点之一在于Optimus在厂子里完成这项工作，是完全自主的，全程没有人为的干预。并且在Optimus的视角之下，它还可以把放歪了的电池重新捡起来放置，主打一个自动纠错：对于Optimus的手，英伟达科学家JimFan给出了高度的评价：Optimus的手是全球五指机器人里最灵巧的之一。它的手不仅有触觉
