脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → ajax实现数据删除、查看详情功能

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

 更新时间：2017年03月19日 14:28:16   作者：v斌v  
本文主要介绍了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">&times;</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

<?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 AjaxDownloader.js[modified]

    ajax AjaxDownloader.js[modified]

    漏洞版本老啦，实用性不够了，just have fun！
    2008-07-07
  • JavaScript实现Ajax总结

    JavaScript实现Ajax总结

    ajax应用非常普及，ajax的优点大家都知道，具体就不多说了，其缺点还真不少，比如破坏浏览器的back功能，同一个url打开的界面并不是完全相同，还有安全性能等方面，至于有这么多的缺点，也阻止不了大家使用ajax的步伐，下文给大家分享javascript实现ajax小结吧
    2015-10-10
  • AJAX 随记

    AJAX 随记

    使用AJAX可以提供无页面刷新便可以从后台更新页面数据，因此可以做出类似桌面应用的效果，但是每用一次AJAX便会用到大量的Javascript语句，今天我把整理了一下，使它变得结构化一些。
    2009-06-06
  • ajax跨域获取网站json数据的实例

    ajax跨域获取网站json数据的实例

    下面小编就为大家分享一篇ajax跨域获取网站json数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Ajax实现页面自动刷新实例解析

    Ajax实现页面自动刷新实例解析

    AJAX 是一种用于创建快速动态网页的技术。接下来通过本文给大家介绍Ajax实现页面自动刷新实例解析，感兴趣的朋友一起看看吧
    2016-04-04
  • Ajax长连接项目案例

    Ajax长连接项目案例

    所谓的长连接，就是不断去发送请求，把请求阻塞在服务器端，每次超过请求时间就去重新发送请求，下面以一个实例为大家详细介绍下，感兴趣的朋友可不要错过了哈
    2013-08-08
  • 零基础学习AJAX之AJAX的简介和基础

    零基础学习AJAX之AJAX的简介和基础

    本系列我们将来逐步学习ajax，作为本系列的开篇文章，我们还是俗套些，先来讲解下ajax的简介和基础知识吧。
    2015-01-01
  • 使用Ajax局部更新Razor页面的实例代码

    使用Ajax局部更新Razor页面的实例代码

    Razor功能非常强大，但是本身并不能做到无刷新，所以需要配合ajax使用。本文通过一个例子给大家介绍使用Ajax局部更新Razor页面，需要的朋友参考下吧
    2017-09-09
  • Ajax的简单实用实例代码

    Ajax的简单实用实例代码

    这篇文章主要介绍了Ajax的简单实用实例代码,需要的朋友可以参考下
    2017-05-05
  • 极致体验ajax局部和整体刷新

    极致体验ajax局部和整体刷新

    本篇文章将向大家介绍如何通过jquery的load方法进行局部刷新，通过封装三个属性然后我们来使用，以此达到我们想要的效果，本文写的非常好，感兴趣的朋友一起看看吧
    2015-09-09

最新评论