怎么用ajax实现数据删除与查看详情-js教程-PHP中文网

首页

web前端

js教程

怎么用ajax实现数据删除与查看详情

php中世界最好的语言

Apr 02, 2018 am 10:37 AM

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=&#39;button&#39; class=&#39;btn btn-info btn-sm sc&#39; code=&#39;"+lie[0]+"&#39;>删除</button><button type=&#39;button&#39; class=&#39;btn btn-primary btn-sm xq&#39; code=&#39;"+lie[0]+"&#39;>查看</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=&#39;{$code}&#39;";
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=&#39;{$code}&#39;";
echo $db->StrQuery($sql);

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery+Ajax判断输入的验证码是否通过

Ajax跨域请求不到cookie

以上是怎么用ajax实现数据删除与查看详情的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。

See all articles