ajax之数据删除、查看详情功能的操作步骤

2024-09-01 08:30:23

字体：大中小

来源：转载

供稿：网友

当我们开发Web程序员时，我们经常需要查看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><div class="page-header"> <h1>显示数据 </h1></div><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） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content">  <div class="modal-header">  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  <h4 class="modal-title" id="myModalLabel">详细信息</h4>  </div>  <div class="modal-body" id="nr">  </div>  <div class="modal-footer">  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div></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 = "<div>民族代号："+lie[0]+"</div><div>民族名称："+lie[1]+"</div>";  $("#nr").html(str);  } }); })}</script></html>

加载数据的页面jiazai.php

<?phpinclude("../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

<?phpinclude("../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之数据删除、查看详情功能的操作步骤，我们需要不断的充实自己，更多相关信息，敬请关注我们的错新技术频道！

上一篇：浅析AjaxFileUpload+Struts2实现多文件上传功能

下一篇：详解ajax分页查询的几个部分