微客导航 » 文章资讯 » ajax实现数据删除、查看详情功能

ajax实现数据删除、查看详情功能

2024-02-27 07:50:04 157

运用bootstrap,jquery和ajax显示一些数据，附加删除功能并且点击能弹出模态框详情功能

主页面main.php





无标题文档
//引入bootstrap的css文件
//先引入jquery的js文件
//再引入其它的js文件

.xq{margin-left:30px}




显示数据

代号名称操作 //用js向其中添加内容

× 详细信息

关闭

//加载数据 Load(); //加载数据的方法 functionLoad() { $.ajax({ url:"jiazai.php", dataType:"TEXT", success:function(data){ varstr=""; varhang=data.split("|");//根据字符串中的|分解 for(vari=0;i"+lie[0]+""+lie[1]+"删除查看"; } $("#tb").html(str);//向tbody中输出内容 addshanchu(); addxiangqing(); } }); } //给删除按钮加事件的方法 functionaddshanchu() { //删除事件 $(".sc").click(function(){ varcode=$(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("删除失败"); } } }); }) } //给查看详情加事件的方法 functionaddxiangqing() { $(".xq").click(function(){ //显示模态框 $('#myModal').modal('show'); //在模态框里面显示内容 varcode=$(this).attr("code");//获取哪一条数据 $.ajax({ url:"xiangqing.php", data:{code:code}, dataType:"TEXT", type:"POST", success:function(data){ varlie=data.split("^"); varstr="

民族代号："+lie[0]+"

民族名称："+lie[1]+"

"; $("#nr").html(str); } }); }) }

加载数据的页面jiazai.php

Query($sql);
//下面实现的字符串是类似这样的n001^汉族|n002^回族|n003^苗族
$str="";返回主页面的数据是TEXT型，得转换一下
foreach($arras$v)
{
$str=$str.implode("^",$v)."|";//拼接字符串
}
$str=substr($str,0,strlen($str)-1);//去掉末尾的|字符。
echo$str;

删除处理页面shanchu.php

Query($sql,0))
{
echo"OK";
}
else
{
echo"NO";
}

查看详情页面xiangqing.php

StrQuery($sql);

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

ajax实现数据删除、查看详情功能

显示数据

热门推荐

随机推荐